React Native: How to create elements and return them in a function-CodePudding

I am new to React Native

and I want to create elements and return them with a button onPress function, I don´t want to hide and show like a Modal, else create them.

import React from "react"
import { Button, StyleSheet, Text, View } from 'react-native';
function createElement() {
  return(
    <View style={styles.elementStyle}>
      <Text style={styles.txt}>ELement</Text>
    </View>
  )
}

const App = () => {
  return (
<View style={{ flex: 1,backgroundColor: '#fff', alignItems: 'center',justifyContent: 'center',}}>
     <Button title="create element" onPress={() => createElement()}/>

   </View>

  );
}
export default App;


const styles = StyleSheet.create({
 container: {flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center',
  },
 elementStyle: { backgroundColor:'grey', width:'95%', height:  90, margin: 10, justifyContent: "center", borderRadius: 10, fontWeight: "bold" },
  txt: {textAlign:'center',fontSize:28,color:'#fff',fontWeight: "bold"}});

I tried with functions that return components, but nothing works

CodePudding user response：

Do you want to have multiple elements or just a single modal?

For multiple elements, do the below. For a single element, it's easiest to just use show / hide logic.

The best way to do this is have an array in state like so:

const [elementArray, setElementArray] = useState();

Your createElement method instead should become two parts, adding elements to the array with the content you want, which you can then render in the main return function with a map method.

const addElement = () => {
    // Just using text here. If you want a more complex element, you will have to add things to the object.
    const newElementText = 'Element';
    const newElementArray = elementArray.slice();
    newElementArray.push(newElementText);
    setElementArray([...newElementArray]);
}

Then in your return function in the component:

{elementArray.map((element) => {
   return (
            <View style={styles.elementStyle}>
                  <Text style={styles.txt}>element</Text>
            </View>
   );
}
)}

Make sure you add a useEffect hook so the component rerenders when you add a new element:

useEffect(()=> {}, [elementArray])

CodePudding user response：

You can't navigate to a component like that. If you are making it so your component appears on the click of a button I suggest building a Stack by importing react-native/navigation. Then, building your structure as shown. My explanation might not have been the best because your initial code was unstructured. This should give you an even better answer. docs

const navigation = useNavigation();

function createElement() {
  return(
    <View style={styles.elementStyle}>
      <Text style={styles.txt}>Element</Text>
    </View>
  )
}

function Home() {
return (
<View style={{ flex: 1,backgroundColor: '#fff', alignItems: 'center',justifyContent: 'center',}}>
     <Button title="create element" onPress={() => navigation.navigate("Element")}/>

   </View>

  );
}

const App = () => {
<Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Element" component={CreateElement} />
      </Stack.Navigator>
}