Develop Reference

How to update text using TextInput

I'm having some troubles trying to figure out how to edit a text thats already been made.
I have done most of the things and the one i'm stuck at is the button that updates the text to the new updated text. I can see the updated text when I use console.log but it doesn't update the text. Thats still the same. Below you can see the full code and I think the updateTodo function is done wrong.
export default function App() {
const [updateTaskId, setUpdateTaskId] = useState('');
const [updateTaskTitle, setUpdateTaskTitle] = useState('');
const [todos, setTodos] = useState([]);
const updateTodo = () => {
const todoAsync = [
...todos,
{
key: updateTaskId,
name: updateTaskTitle,
},
];
setTodos(todoAsync);
};
const renderitem = ({item}) => {
return (
<View
style={{
flex: 1,
backgroundColor: colors.card,
margin: 10,
elevation: 1,
borderRadius: 10,
padding: 10,
}}>
<View style={{flexDirection: 'row'}}>
<Fontisto
name={item.isChecked ? 'checkbox-active' : 'checkbox-passive'}
size={20}
color={colors.text}
onPress={() => checkTodo(item.key)}
/>
<TouchableOpacity
onLongPress={() => {
setUpdateModal(true);
setUpdateTaskTitle(item.name);
}}>
<Text
style={{
color: colors.text,
marginLeft: 20,
marginRight: 20,
}}>
{item.name}
</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Fontisto name="date" size={20} color={colors.text} />
<Text style={{marginLeft: 20, color: colors.text}}>{item.date}</Text>
</View>
<View
style={{
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Feather
name={item.notification ? 'bell-off' : 'bell'}
size={20}
color={colors.text}
onPress={() => checkNotification(item.key)}
/>
<Fontisto
name="trash"
size={20}
color={colors.text}
onPress={() => {
setModalVisible(true);
setDetails(item);
}}
/>
</View>
</View>
);
};
return (
<View style={{flex: 1, backgroundColor: colors.background}}>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={updateModal}
onRequestClose={() => {
setUpdateModal(!updateModal);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View style={{}}>
<TextInput
style={{backgroundColor: colors.background, marginTop: 10}}
onChangeText={name => setUpdateTaskTitle(name)}
value={updateTaskTitle}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 50,
}}>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
setUpdateTaskTitle('');
}}>
<Text>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
updateTodo(...todos, {name: updateTaskTitle});
setUpdateTaskTitle('');
console.log(updateTaskTitle);
}}>
<Text>Update</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View>
<Text style={{fontSize: 20, color: colors.text}}>Delete?</Text>
</View>
<View
style={{
flexDirection: 'row',
marginTop: 15,
}}>
<Text style={{color: colors.text}}>Completed: </Text>
<Fontisto
style={{marginLeft: 20}}
name={
details.isChecked ? 'checkbox-active' : 'checkbox-passive'
}
size={15}
color={colors.text}
/>
</View>
<View style={{flexDirection: 'row', marginTop: 20}}>
<Text style={{color: colors.text}}>Title: </Text>
<Text
numberOfLines={1}
style={{marginLeft: 15, marginRight: 15, color: colors.text}}>
{details.name}
</Text>
</View>
<Text style={{marginTop: 20, color: colors.text}}>
Created: {details.date}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 30,
}}>
<TouchableOpacity
onPress={() => {
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
deleteTodo(details.key);
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Delete</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: colors.Textinput,
elevation: 12,
}}>
<TextInput
style={{
flex: 1,
backgroundColor: '#fff',
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
}}
placeholder="What Tododay?"
placeholderTextColor="#000"
onChangeText={value => setTitle(value)}
value={title}
autoCapitalize="words"
/>
<Entypo
style={{
marginLeft: 1,
padding: 13,
backgroundColor: '#fff',
height: 49,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
}}
name="add-to-list"
size={25}
color="#000"
onPress={() => addTodo()}
/>
</View>
<View style={{flex: 1}}>
<FlatList
data={todos}
renderItem={renderitem}
ListEmptyComponent={emptyListComponent}
/>
</View>
</View>
);
}

Here is what you need to do.
make a copy of all todos
filter out the todo that you are about to update out of the todos array
concat a new todo with the new text to the array of todos
it should render as expected
const updateTodo = () => {
const todoAsync = [
...todos,
].filter((item) => item.id !== updateTaskId).concat([{
key: updateTaskId,
name: updateTaskTitle,
}])
setTodos(todoAsync);
};
Try this if you want to keep the same todo on the screen but only update the object key for name.
const updateTodo = () => {
const todoAsync = [
...todos,
].map((item) => {
const { key } = item;
if(key === updateTaskId} {
// return updated object
return {
key,
name: updateTaskTitle,
}
}
else return item;
}
setTodos(todoAsync);
};

React Navigation Header Button (V5 / Version 5.x): Show Menu Item

I am using React-Native-Paper's Menu Component
I am trying to show Menu item from the header after tapping an icon.
So far I have managed to show list of item on the screen only.
However, I want to show the menu list from the header.
Due to React Navigation's update from version:4.x to version:5.x, I am a bit confused on how to work this out. I tried following the example here but still I need some time to fully understand hook and the way it works.
All kinds of help would be appreciated.
Workable/Testable code link, code snippets and screenshots provided below:
Snack Link
Register.js:
import { TextInput, Button, Menu, Divider, Provider } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
class Register extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
}
}
//[ TEST DROP DOWN MENU ]
_openMenu = () => this.setState({ visible: true });
_closeMenu = () => this.setState({ visible: false });
renderMenuExample() {
return (
<View
style={{
paddingTop: 50,
flexDirection: 'row',
justifyContent: 'center'
}}>
<Menu
visible={this.state.visible}
onDismiss={this._closeMenu}
anchor={
< TouchableOpacity
onPress={this._openMenu}
style={{ marginHorizontal: 20 }}
>
<MaterialCommunityIcons name="earth" size={30} style={{ color: 'black' }} />
</TouchableOpacity>
}
>
<Menu.Item onPress={() => { }} title="Item 1" />
<Menu.Item onPress={() => { }} title="Item 2" />
<Divider />
<Menu.Item onPress={() => { }} title="Item 3" />
</Menu>
</View>
);
}
//[ TEST DROP DOWN MENU ]
render() {
return (
<Provider>
{this.renderMenuExample()}
</Provider>
);
}
}
export default Register;
App.js:
import { TextInput, Button, Menu, Divider, Provider } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Register"
component={Register}
options={{
headerBackImage: () => (
<AntDesign name="close" size={30} style={{ color: 'white' }} />
),
headerTitle: () => (
<View>
<Text style={{ flex: 1, fontSize: 20, fontWeight: 'bold', alignSelf: 'center', color: 'white' }}>
Register
</Text>
</View>
),
headerRight: () => (
<TouchableOpacity
onPress={() => {/* I WANT TO SHOW THE MENU HERE */ }}
style={{ marginHorizontal: 20 }}
>
<MaterialCommunityIcons name="earth" size={30} style={{ color: 'white' }} />
</TouchableOpacity>
),
headerStyle: {
backgroundColor: '#2e46ff',
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Screenshot:

One possible solution would be to wrap the navigation container with a provider and have a separate component for the menu.
Tried this with your snack and it works
The code would be as below.
const CustomMenu = () => {
const [showMenu, setShowMenu] = React.useState(false);
return (
<View style={{}}>
<Menu
visible={showMenu}
onDismiss={() => setShowMenu(false)}
anchor={
<TouchableOpacity onPress={() => setShowMenu(true)}>
<MaterialCommunityIcons
name="earth"
size={30}
style={{ color: 'black' }}
/>
</TouchableOpacity>
}>
<Menu.Item onPress={() => {}} title="Item 1" />
<Menu.Item onPress={() => {}} title="Item 2" />
<Divider />
<Menu.Item onPress={() => {}} title="Item 3" />
</Menu>
</View>
);
};
function App() {
return (
<Provider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Register"
component={Register}
options={{
headerBackImage: () => (
<AntDesign name="close" size={30} style={{ color: 'white' }} />
),
headerTitle: () => (
<View>
<Text
style={{
flex: 1,
fontSize: 20,
fontWeight: 'bold',
alignSelf: 'center',
color: 'white',
}}>
Register
</Text>
</View>
),
headerRight: () => <CustomMenu />,
headerStyle: {
backgroundColor: '#2e46ff',
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
</Provider>
);
}

How to create a Button that Change Background Color onPress in react native?

How can i create a button/TouchableOpacity that change the background color of style={styles.view} ?
<View style={styles.view}>
{user &&
<>
<TouchableOpacity onPress={carregaUsuarioAnonimo}>
<Image
style={styles.avatar}
source={{ uri: user.picture }} />
</TouchableOpacity>
<Text style={styles.nome_usuario}>{user.name}</Text>
</>
}
<ScrollView style={styles.scrollview} ref={(view) => { setScrollview(view) }}>
{
mensagens.length > 0 && mensagens.map(item => (
<View key={item.id} style={styles.linha_conversa}>
<Image style={styles.avatar_conversa} source={{ uri: item.avatar }} />
<View style={{ flexDirection: 'column', marginTop: 5 }}>
<Text style={{ fontSize: 12, color: '#999' }}>{item.usuario}</Text>
{typeof (item.mensagem) == "string" ?
<Text>{item.mensagem}</Text>
:
<Text> </Text>
}
</View>
</View>
))
}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.input_mensagem}
onChangeText={text => setCaixaTexto(text)}
value={caixaTexto} />
<TouchableOpacity onPress={salvar}>
<Ionicons style={{ margin: 3 }} name="md-send" size={32} color={'#999'} />
</TouchableOpacity>
</View>
</View>)

you can make a condition inside the style, like that:
create a boolean inside your state and change it value to true when the button is clicked.
Inside your Touchable, drop the condition.
style={
this.state.buttonCliked ? styles.backgroundBlue :
styles.backgroundGreen
}
I hope it helps you.

This is an example:-
state={isClicked:false}
checkToChangeStyle=()=>{
this.setState({isClicked:!this.state.isClicked})
}
return(
<TouchableOpacity onPress={this.checkToChangeStyle}
style={this.state.isClicked ? styles.backGround1 : styles.backGround2}>
<Text>Your Button</Text>
</TouchableOpacity>
)
const styles=StylesSheet.create({
backGround1:{backgroundColor:'green'},
backGround2:{backgroundColor:'red'},
})

JSX expressions must have one parent element.ts(2657) react native

I am new to react native and have tried everything and keep getting the following error
JSX expressions must have one parent element.ts(2657)
I am trying to display information from json in a flatlist.
Here is my code.
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View>
<View style={{backgroundColor: '#808080'}}>
<Text style={styles.MainText}>Sermons</Text>
</View>
<FlatList style={{paddingTop: 30}}
data={ DATA }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={this._renderItem} />
</View>
);
}
_renderItem = ({item}) => {
return(
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
);
}
}
line 33 ); seems to be causing the problem but I don't know why.

You can't render adjacent elements. They must have some parent element or React.Fragment:
return(
<>
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
</>
);
<></> is short for <React.Fragment></React.Fragment>

You have 2 view components in return. You should have 1 parent component so you can wrap them into a react fragment.
return(
<>
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
</>
);

You need to add a container View:
_renderItem = ({item}) => {
return(
<View>
<View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
<Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
</View>
<View style={{flex: 1, paddingLeft: 20}}>
<Text>{item.title}</Text>
</View>
</View>
);
}

Passing param properly to a function in React Native

I'm struggling to pass const navigation = useNavigation(); properly to my outer function.
Currently, I have this 'main' function:
export default function MyDrawer({ route }) {
const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed
return (
<NavigationContainer independent={true}>
<Drawer.Navigator
initialRouteName="QR"
drawerContent={props => CustomDrawerContent(props, route)}
>
<Drawer.Screen
name="QR"
component={QR}
initialParams={{ user: route.params.user }}
/>
<Drawer.Screen name="Odabir" component={Odabir} />
</Drawer.Navigator>
</NavigationContainer>
);
}
which handles the drawer logic and routing. I used to declare const Drawer = createDrawerNavigator() in this function:
function CustomDrawerContent({ props, navigation }, route, ) {
// *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
// const navigation = useNavigation();
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
alignItems: "center",
justifyContent: "center",
marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
}}
>
<Image
source={{uri:route.params.user.photoUrl}}
style={{ height: 110, width: 110, borderRadius: 60 }}
/>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.name} {route.params.user.lastname}
</Text>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.email}
</Text>
</View>
<View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
<Text style={styles.naslov}></Text>
</View>
<Divider />
<ScrollView style={{ marginLeft: 5 }}>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("QR")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> QR</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}
Which handles the onPress routing to different components. I've had to move the const nav = useNavigation(); because of how hooks work and the process of catching data from the Google API.
My question is how do I properly pass the param back to the MyDrawer function so the navigation works again? The error I currently get is TypeError: undefined is not an object(evaluating 'props.navigation')

update code:
export default function MyDrawer({ route }) {
const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed
return (
<NavigationContainer independent={true}>
<Drawer.Navigator
initialRouteName="QR"
drawerContent={props => <CustomDrawerContent {...props} {...{route}} />}
>
<Drawer.Screen
name="QR"
component={QR}
initialParams={{ user: route.params.user }}
/>
<Drawer.Screen name="Odabir" component={Odabir} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Drawer Content
const CustomDrawerContent = ({navigation, route}) => {
// *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
// const navigation = useNavigation();
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
alignItems: "center",
justifyContent: "center",
marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
}}
>
<Image
source={{uri:route.params.user.photoUrl}}
style={{ height: 110, width: 110, borderRadius: 60 }}
/>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.name} {route.params.user.lastname}
</Text>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.email}
</Text>
</View>
<View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
<Text style={styles.naslov}></Text>
</View>
<Divider />
<ScrollView style={{ marginLeft: 5 }}>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("QR")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> QR</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}