react-native-faq
React Native F.A.Q.
Installation
Run npm install react-native-faq
or yarn add react-native-faq
See it in action!
react-native-faq SNACK example
COMPONENTS
FAQ
It renders and array of questions each question should be defined according the Question Component.
e.g.
//Define some questionsconst questions = question: "How can I help you?" reply: "You have several options to choose:" bullets: bullets actionText: "I'm ready to help!" onClick: action_example // Render a FAQ component <FAQ questions=questions />
prop | type | default | description |
---|---|---|---|
containerStyle | object |
"{}" |
Style for the main View Component of the F.A.Q. This view contains the title and questions container |
titleContainerStyle | object |
"{}" |
Style for the View component title container |
titleStyle | object |
"{ fontSize: 30, textAlign: 'center'}" |
Style for the Text component containing the title |
title | string |
`` | A string for the title of the FAQ |
questions | array |
`` | An array containing the Questions to be rendered. |
questionContainerStyle | object |
"{}" |
styles for the View component questions container. |
Question
Ideally to be render as an array inside the F.A.Q. component, but can be render alone just.
Here you have an example for the definition of a simple Question:
//First define some bullets const bullets = "you could say hello" "Open an issue" "making a pull request" "or give me more ideas to improve this component"//Then definy an action (WebBroser is a method from ["expo"](https://docs.expo.io/versions/latest/)) const action_example = { WebBrowser}; //Wrap up everything in your quesstion propsconst props = question: "How can I help you?" reply: "You have several options to choose:" bullets: bullets actionText: "I'm ready to help!" onClick: action_example //Finally render your question <Question ...props />
prop | type | default | description |
---|---|---|---|
bullets | array |
"null" |
An array of strings containing the aditional bullets for the Questions. |
bulletStyle | object |
"{ marginLeft: \"10%\"}" |
Each bullet is made of a Text component, use this props to style all bullets. |
actionText | string |
`` | An string inside a Text component for the title. |
containerStyle | object |
"{ backgroundColor: \"lightgrey\", margin: 2, borderRadius: 5}" |
Main Question View component style. |
actionStyle | object |
"{ backgroundColor: \"black\", borderRadius: 5, margin: 5}" |
Question action button style container It's a Touchable Opacity component containing a Text component |
actionTextStyle | object |
"{ fontSize: 30, textAlign: \"center\"}" |
Text component style for the Question title |
replyStyle | object |
"{ fontSize: 15}" |
Question reply container style |
titleStyle | object |
"{ fontSize: 20}" |
Question title container style |
onClick | func |
"null" |
onClick prop: Can be any function you want to trigger. |
EXPO EXAMPLE
A working example for an expo project
;;; // define some bulletsconst bullets = 'you could say hello' 'Open an issue' 'making a pull request' 'or give me more ideas to improve this component'// define an actionconst action_example = { WebBrowser;} const goTo = { WebBrowser;} const questions = question: "How can I help you?" reply: "You have several options to choose:" bullets: bullets actionText: "I'm ready to help!" onClick: action_example question: "Don't you know how to start?" reply: "Open a GitHub account and chat whit me" actionText: "Sure! Take me there!" // or any pure javascript modules available in npm; Component { return <View style=stylescontainer> <View> <Text style= textAlign: 'center' >You can load a complete FAQ</Text> <FAQ title='F.A.Q.' questions=questions /> </View> <View> <Text style= textAlign: 'center' >Or add your questions one by one</Text> <Question question="Is it possible to add just one question?" reply="Of course, here you have an example" actionText="Sure! Take me there!" onClick= /> </View> </View> ; } const styles = StyleSheet;