Overview
Agile RN is a React Native ⚛ template that was created to speed up project start-up as well as make app development easier.
Key features
- React Hooks 🎣
- Easy form validation ✅
- Fast layout mounting 📱
Guides<Form />
element
API
Key features
- React Hooks 🎣
- Easy form validation ✅
- Fast layout mounting 📱
Guides
<Form />
element
API
Prop | Type | Required | Note |
---|---|---|---|
schema |
Yup.object |
false |
Validates form fields on button press |
initialData |
Object |
false |
Defines initial values in form fields |
onSubmit |
Function |
true |
Will be called after button press, if data passes schema validation |
ref |
React.createRef |
true |
Must be defined to send data on form button press ref.current.send() |
Example
;;; ; const schema = yupobjectshape email: yup password: yup; { const formRef = ; { console; /* { email: 'example@mail.com', password: '123' } */ } return <Form schema=schema onSubmit=handleSubmit ref=formRef> <Input name="email" label="Email" /> <Input name="password" label="Password" /> <Button title="Enter" onPress= formRefcurrent /> </Form> ;}
<Block />
element
API
Prop | Type | Default | Note |
---|---|---|---|
container |
Boolean |
false |
Adds a SafeAreaView + KeyboardAvoidingView around component |
weight |
Boolean/Number |
"none" |
Defines the weight of component (flex) |
color |
String |
"transparent" |
Defines the component color |
align |
Boolean/String |
"flex-start" |
Sets align-items style to the component |
justify |
Boolean/String |
"flex-start" |
Sets justify-content style to the component |
row |
Boolean |
false |
Sets flex-direction row to the component |
distante |
Array<Number> |
[] |
Sets padding into the component |
Example
;; ; { return <Block container align justify> <Text>Hello World</Text> </Block> ;}
Dependencies
- Async Storage
- Prop Types
- React Native Gesture Handler
- React Native Masked Text
- React Native Vectors Icons
- React Navigation
- Redux
- Redux Saga
- Styled Components
- Yup
Dev Dependencies
- Eslint
- Prettier
- Reactotron