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

am new at react native and try to show hello world text once i press the button the below code could not execute the function

”’
import { StyleSheet, Text, View, SafeAreaView, TouchableOpacity, Button } from ‘react-native’
import React from ‘react’

const onPressHndler = () => {
    <View>
      <Text>
        Hello world 
      </Text>
    </View>
     
}
export default () =>{
  return(
    <SafeAreaView>
    <View>
  <Button title='press' onPress={onPressHndler}/>
    </View>
    </SafeAreaView>
  )
}
Tags:

2

Answers


  1. 0 
    export default () =>{
  const [isContentVisible , setContentVisible] = useState(false)
  return(
    <SafeAreaView>
    <View>
      <Button title='press' onPress={() => setContentVisible(true)}/>
      { isContentVisible &&
        <View>
          <Text>
            Hello world 
          </Text>
        </View>
      }
    </View>
    </SafeAreaView>
  )
}
    Login or Signup to reply.
  2. 0 
        export default () =>{
    const [showContent , setShowContent] = useState(false)

    onPressHandler = ()=>{
        setShowContent(true)
    }
    return(
        <SafeAreaView>
        <View>
        <Button title='press' onPress={onPressHandler}/>
        { showContent &&
            <View>
            <Text>
                Hello world 
            </Text>
            </View>
        }
        </View>
        </SafeAreaView>
    )
    }

    your function must define the action you expect your code to do not the outcome you expect to see, while the condition in your JSX will make sure that the content follows this logic.

    You can even alter the same state false/true

        export default () =>{
    const [showContent , setShowContent] = useState(false)

    onPressHandler = ()=>{
        setShowContent(!showContent)
    }
    return(
        <SafeAreaView>
        <View>
        <Button title='press' onPress={onPressHandler}/>
        { showContent &&
            <View>
            <Text>
                Hello world 
            </Text>
            </View>
        }
        </View>
        </SafeAreaView>
    )
    }

    Now a press on the button will show content, another will hide it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search