Question 34339 in React native Question posted in
The official React Native documentation can be found here.

How to add button to React Native

I’m very new to react native and am trying to add a button to this page. I’m not very sure exactly where to place the code because I keep getting the error "Adjacent JSX elements must be wrapped in enclosing tag." Any help would be very appreciated.

function Expenses() {

  return (
    
  <View style={styles.settings}>
    <Button 
    title="Am I overbudget?"
    onPress={
      () => Alert.alert(
        'No you are not overbudget !')}
        />
        </View>
    
    <View style={styles.container}>
      <TextInput style={styles.input} placeholder="Input Expenses"  />
      <TextInput style={styles.input} />
      <Text>Expenses</Text>
    </View>
    
  );
  
};
Tags:

2

Answers


  1. 0

    The problem is because you are trying to render multiple views within the component. There can only be one top-level element. To fix this issue you can either wrap the sub views with a parent view or with react fragments.

    function Expenses() {

  return (
    <>
  <View style={styles.settings}>
    <Button 
    title="Am I overbudget?"
    onPress={
      () => Alert.alert(
        'No you are not overbudget !')}
        />
        </View>
        
    
    <View style={styles.container}>
      <TextInput style={styles.input} placeholder="Input Expenses"  />
      <TextInput style={styles.input} />
      <Text>Expenses</Text>
    </View>
      </>
  );
  
}
    Login or Signup to reply.
  2. 0

    The error you’re getting is because you can only have a single top-level element, and you have two Views at the moment. One way to fix it is to wrap the whole JSX code in another View.

    Something like this

    function Expenses() {

  return (
    <View>
      <View style={styles.settings}>
        <Button 
         title="Am I overbudget?"
         onPress={
          () => Alert.alert(
          'No you are not overbudget !')}
        />
      </View>
    
      <View style={styles.container}>
        <TextInput style={styles.input} placeholder="Input Expenses"  />
        <TextInput style={styles.input} />
        <Text>Expenses</Text>
      </View>
    </View>
  );
  
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search