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 questions
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
}]

// 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.openBrowserAsync(
       "https://github.com/Olcina/react-native-faq"
   )};

//Wrap up everything in your quesstion props
const  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

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, WebBrowser } from 'expo';
import { FAQ, Question } from './components/Question'

// 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'
]
// define an action
const action_example = () => {
    WebBrowser.openBrowserAsync(
        'https://github.com/Olcina/react-native-faq'
    );
}

const goTo = (link) => {
    WebBrowser.openBrowserAsync(
        link
    );
}

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!",
        onClick: () => goTo('https://github.com/'),
    }
]

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>

                <View>
                    <Text style={{ textAlign: 'center' }}>You can load a complete F.A.Q.</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={() => goTo('https://github.com/')}
                    />
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-evenly',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
    }
});