Network Printer Manager

    react-native-faq

    0.0.7 • Public • Published

    Build Status

    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,
        }
    });
     
     

    Install

    npm i react-native-faq

    DownloadsWeekly Downloads

    6

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    274 kB

    Total Files

    13

    Last publish

    Collaborators

    • olcina