0

Im very new to react-native and javascript. I dont really know how to start this little project

users can select 1 option for each question

what pet do you prefer?

  • a dog

  • a cat

what color do you want your pet to be

  • red

  • green

Based on what they selected, an image (e.g.: a red dog) will appear. I dont really know wether I should store the answers in an array and how to load the questions?

1

2 Answers 2

1

The most important concept of any react-native (and react for that matter) app is the concept of component.

What you want is to make a component "Question" that can receive via props the question's title and its possible answers. This way you can avoid repeating code when making different questions. I'll let you play with the inner implementation, should be easy enough searching for examples using checkboxes and labels.

Then, from your root component (or the component where you want to display these questions), you instance two of these Question with the respective data. This would look something like:

const App = () => {
  return (
    <View>
      <Question
        title="What pet do you prefer?"
        answers=[
          "A dog",
          "A cat"
        ]
      />
      <Question
        title="What color do you want your pet to be?"
        answers=[
          "red",
          "green"
        ]
      />
    </View>
  )
}

You can also add a button so that clicking it shows the corresponding image.

Finally, what you will need is to have the answers available in your root component, so that you can get the image via a request or however you were going to get it. After that, you just need to use it.

To do this, I defined state within the App component, I passed props to several components, and used some defined react native components. You should read about all of these in react native's docs, which are pretty good.

Here is the example:

const App = () => {
  const [state, setState] = useState({})
  const [image, setImage] = useState(null)

  // This is useful for changing this component's state from within the children
  const changeAnswer = ({question, answer}) => {
    setState({...state, question: answer})
  }

  const getImage = async () => {
    const { data } = await apiCall(state) // Or however you were going to get the image
    setImage(data.image)
  }

  return (
    <View>
      <Question
        changeAnswer={changeAnswer}
        title="What pet do you prefer?"
        answers=[
          "A dog",
          "A cat"
        ]
      />
      <Question
        changeAnswer={changeAnswer}
        title="What color do you want your pet to be?"
        answers=[
          "red",
          "green"
        ]
      />
      <Button
        title="Show image!"
        onPress={getImage}
      />
      {image && 
        <Image src={image} />
      }
    </View>
  )
}

Try to experiment and see where it gets you and what you can learn! The most important part when learning a new technology is to experiment.


Just out of curiosity, are you using expo to run your react native app?

Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for the reply! And yes I am using expo at the moment.
I asked because you can create a project with different templates, so you can learn lots of great concepts with them
Oh I see. I will look around and see if I can use some for my project. This question and answer section is just a small part of it.
1

I hope you will enjoy learning about Reactjs and the world of Javascript. Firstly, I've noticed that you have tagged both Reactjs and React-native. Syntactically they are almost the same, but one is used to render to native platform UI to display as apps on smartphones, and the other is used for HTML DOM to display in internet browsers.

Nevertheless, I have made an example for you in Reactjs. Now React-native does not use the HTML dom (which is what is rendered in the example), but the logic will be somewhat the same!

Edit modest-khayyam-g237i

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.