@dattarpan/react-native-ui-components NPM

react-native-ui-components

This is a react native module for all the components we created for our app.

Installation

npm install @dattarpan/react-native-ui-components

Ios

Edit Info.plist and add the below code

<key>UIAppFonts</key>
<array>
  <string>MaterialCommunityIcons.ttf</string>
</array>

Android
This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.
Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:
```
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
To customize the files being copied, add the following instead:
```
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialCommunityIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```

Usage

ProgressiveFlatList

import { ProgressiveFlatList } from 'react-native-ui-components';

// ...

<ProgressiveFlatList
  data={[
    {...},
    {...}
  ]}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>;

// ...

FormControl, FormControlProvider, ReactHookForm

import { FormControl, FormControlProvider, ReactHookForm } from 'react-native-ui-components';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

// ...

const form = ReactHookForm.useForm();

// ...

<FormControlProvider {...form}>
  <FormControl 
    name="email"
    style={styles.formControl}
    innerStyle={styles.innerStyle}
    textInputStyle={styles.textInputStyle}
    rightIconStyle={styles.rightIconStyle}
    rightIcon={<Icon name="calendar-blank"
    color="#000"
    size={25} />}
  />
  <FormControl
    name="password"
    style={styles.formControl}
    innerStyle={styles.innerStyle}
    secureTextEntry
    textInputStyle={styles.textInputStyle}
    rightIconStyle={styles.rightIconStyle}
  />
</FormControlProvider>

// ...

Button, TYPE

import { Button, TYPE } from 'react-native-ui-components';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

// ...

const primary = '#12699C';
const secondary = '#FFFFFF';

// ...

<Button
  label='Save'
  style={styles.button}
  type={TYPE.PRIMARY}
  primaryColor={primary}
  secondaryColor={secondary}
  labelStyle={styles.labelStyle}
  iconLeft={
    <Icon
      name="calendar-blank"
      color={secondary}
      size={25}
    />
  }
  iconRight={
    <Icon
      name="calendar-blank"
      color={secondary}
      size={25}
    />
  }
/>

// ...