@dattarpan/react-native-ui-components
v0.2.1
Published
This is a react native module for all the components we created for our app.
Downloads
3
Readme
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
( NOTandroid/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} /> } /> // ...
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library