How to use the @emotion/native.TextInput function in @emotion/native

To help you get started, we’ve selected a few @emotion/native examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github echobind / react-native-template / template / src / components / TextInput / TextInput.tsx View on Github external
*/
   accessibilityLabel?: string;
}

type ComponentProps = TextInputProps &
  ColorProps &
  SpaceProps &
  TextStyleProps &
  TypographyProps &
  BorderProps &
  LayoutProps &
  FlexProps;

const InputContainer = styled(Container)``;

const Input = styled.TextInput`
  ${flex};
  ${borders};
  ${color};
  ${layout};
  ${space};
  ${textStyle};
  ${typography};
`;

// NOTE: for layout and dimensioning of TextInput, wrap it in a Container
export const TextInput: FC = ({
  topLabel,
  icon,
  accessibilityLabel,
  multiline,
  borderColor,
github storybookjs / storybook / app / react-native / src / preview / components / StoryListView / index.tsx View on Github external
/* eslint-disable react/destructuring-assignment */
import React, { Component } from 'react';
import { SectionList, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
import styled from '@emotion/native';
import Events from '@storybook/core-events';
import addons from '@storybook/addons';
import { EmotionProps } from '../Shared/theme';
import { Header, Name } from '../Shared/text';

const SearchBar: typeof TextInput = styled.TextInput`
  background: ${(props: EmotionProps) => props.theme.borderColor};
  color: ${(props: EmotionProps) => props.theme.buttonActiveTextColor};
  border-top-left-radius: 5;
  border-top-right-radius: 5;
  border-bottom-left-radius: 5;
  border-bottom-right-radius: 5;
  font-size: 16;
  margin-horizontal: 5;
  margin-vertical: 5;
  padding-horizontal: 5;
  padding-vertical: 5;
`;

const HeaderContainer = styled.View`
  padding-vertical: 5;
`;
github storybookjs / storybook / app / react-native / src / preview / components / StoryListView / index.tsx View on Github external
import React, { Component } from 'react';
import { SectionList, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
import styled from '@emotion/native';
import Events from '@storybook/core-events';
import addons from '@storybook/addons';
import { EmotionProps } from '../Shared/theme';
import { Header, Name } from '../Shared/text';

const SearchBar: typeof TextInput = styled.TextInput`
  background: ${(props: EmotionProps) => props.theme.borderColor};
  color: ${(props: EmotionProps) => props.theme.buttonActiveTextColor};
  border-top-left-radius: 5;
  border-top-right-radius: 5;
  border-bottom-left-radius: 5;
  border-bottom-right-radius: 5;
  font-size: 16;
  margin-horizontal: 5;
  margin-vertical: 5;
  padding-horizontal: 5;
  padding-vertical: 5;
`;

const HeaderContainer = styled.View`
  padding-vertical: 5;
`;

@emotion/native

Style and render React Native components using emotion

MIT
Latest version published 1 year ago

Package Health Score

65 / 100
Full package analysis