Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

322
Views
React Native: How to create elements and return them in a function

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

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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])
about 4 years ago · Santiago Trujillo Report

0

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>
}
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!