We Keep Coding

The text is not output to the form

I'm new to react native, trying to write a small project (notebook). I implemented the buttons, they all work, but when I save an entry to the form, nothing is displayed and does not give errors.
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Modal, Text, View, ScrollView, TextInput, Image, Button } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import React, {useState} from 'react';
import { Formik } from 'formik';
export default function App() {
const [news, setnews] = useState([
{name: '', text: ''}
]);
const addArtical = (artical) => {
setnews((list) => {
artical.key = Math.random().toString();
return[
artical,
...list
]
});
setModalWindow(false);
}
const [modalWindow, setModalWindow] = useState(false);
return (
<View style={styles.container}>
<Text style={styles.title}>Main tasks:</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<View style={styles.up}>
<View style={styles.cub}></View>
<View style={styles.cub}></View>
<View style={styles.cub}></View>
<View style={styles.cub}></View>
<View style={styles.cub}></View>
<View style={styles.cub}></View>
</View>
</ScrollView>
<ScrollView vertical={true} showsVerticalScrollIndicator={false}>
<View style={styles.all}>
<TextInput style={styles.d} placeholder=' Search'></TextInput>
<Text style={styles.titletwo}>Other tasks:</Text>
<Ionicons style={styles.ic} name="add" size={30} color="black" onPress={() => setModalWindow(true)}/>
</View>
<Modal visible={modalWindow}>
<Ionicons style={styles.ic} name="close" size={30} color="black" onPress={() => setModalWindow(false)}/>
<View>
<Formik initialValues={{name: '', text: ''}} onSubmit={(values, clean) => {
addArtical(values);
clean.resetForm();
}}>
{(props) => (
<View >
<TextInput value={props.values.name} placeholder='Name' onChangeText={props.handleChange('name')}/>
<TextInput value={props.values.text} multiline placeholder='Text' onChangeText={props.handleChange('text')}/>
<Button title='Add' onPress={props.handleSubmit}/>
</View>
)}
</Formik>
</View>
</Modal>
</ScrollView>
</View>
);
}
Read more: I click add entry, a field opens with the addition of text, fill in the field with the necessary information, save, everything is successful, but my entry is nowhere

React Native simple useState does not work, state is staying 'undefined' and "setState is not a function"

I have just a simple React-Native Component that uses useState as a test if it works. When I set the userstate, and I just print it, it logs 'undefined'. Also when I call setUser, it throws an error, that setUser is not a function. Whats wrong with my Setup?:
import { StyleSheet, Text, View, TextInput, Button, Seperator, Pressable } from 'react-native'
import React, {useState, useEffect} from 'react'
import colors from '../theme/colors.style.js'
import NetInfo from '#react-native-community/netinfo';
import { checkConnected } from '../utils/Netinfo.js';
export default function MachineManager() {
const {connectStatus, setConnectStatus} = useState(false);
const {user, setUser} = useState("martin");
console.log(user);
return (
<View style={styles.container}>
<View style={styles.connectorMenu}>
<View style={styles.shadowView}>
<View style= {styles.connectionMenuHeader}>
<Text style={styles.connectionMenuHeaderText}>Verbundenes Gerät</Text>
</View>
<View style={styles.inputRow}>
<Text style={styles.inputLabel}>SSID:</Text>
<TextInput placeholder="SSID Kennung" style={styles.input}/>
</View>
<View style={styles.inputRow}>
<Text style={styles.inputLabel}>Passwort:</Text>
<TextInput placeholder="Passwort" style={styles.input}/>
</View>
<View style={styles.connectionControl}>
<View style={styles.connectionControlStatus}>
<Text style={styles.connectionControlStatusText}>Status: Nicht Verbunden</Text>
<Text style={styles.connectionControlStatusText}>{user}</Text>
</View>
<View style={styles.connectionControlConnect}>
<Pressable style={styles.connectButton}>
<Text style={styles.connectButtonText}>Verbinden</Text>
</Pressable>
</View>
</View>
</View>
</View>
</View>
)
}

The syntax is incorrect. It needs to be -
const [connectStatus, setConnectStatus] = useState(false);
const [user, setUser] = useState("martin")

How to navigate from one screen to another in React native?

When I click on Sign Up button I want to navigate to Sign up page but it did not work. I have imported the screens and navigated screen also to app.js file. I am getting an ReferenceError : Can't find variable: navigation. Also I am unable to insert background image? Below is the Sign Up page.
import React from 'react';
import { StyleSheet,ImageBackground,Text, View, TextInput, TouchableOpacity } from 'react-native';
let bgImage='../../resources/images/bg2.png'
export default class LoginScreen extends React.Component {
state={
email:"",
password:"",
}
render(){
return (
<View style={styles.container}>
<Text style={styles.logo}>Trollo</Text>
<View style={styles.box}>
<View style={styles.inputView} >
<TextInput
style={styles.inputText}
placeholder="Email"
placeholderTextColor="#808080"
onChangeText={text => this.setState({email:text})}/>
</View>
<View style={styles.inputView} >
<TextInput
secureTextEntry
style={styles.inputText}
placeholder="Password"
placeholderTextColor="#808080"
onChangeText={text => this.setState({password:text})}/>
</View>
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>SIGN IN</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.forgot}>Forgot Password?</Text>
</TouchableOpacity>
</View>
<Text style={styles.text1}>New Here?</Text>
<TouchableOpacity style={styles.signupBtn} onPress = {(navigation) => navigation.navigate('Sign Up')}>
<Text style={styles.loginText}>SIGN UP</Text>
</TouchableOpacity>
<Text style={styles.logoText}>Trollo</Text>
</View>
);
}
}
});

onPress handler does not getting called with navigation as the first parameter. That is undefined. navigation is a prop to your class component which is provided by stack navigator setup.
Instead of
onPress = {(navigation) => navigation.navigate('Sign Up')}
use
onPress = {() => this.props.navigation.navigate('Sign Up')}

React-Navigation: Navigating by pressing images

I am trying to navigate screens by pressing on specific images on SearchScreen.js. Each image leads to a different screen. I am currently trying navigate from the first image to the screen meo_sw.js. However, I am not being able to do so and I don't undersand why. Here is the code of SearchScreen.js :
import React from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, Image, TouchableOpacity} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
function SearchScreen() {
return (
<View style={styles.screen}>
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "black"
selectionColor="black"
keyboardType="default"/>
</View>
<View style={styles.teste}>
<Text style={styles.festivais}>Recomendados</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
<TouchableOpacity>
<Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image} onPress={() => navigation.navigate('meo_sw')}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/superbock_superrock.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/nos_primavera.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/rock_in_rio.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
</ScrollView>
</View>
</View>
);
}
SearchScreen.navigationOptions = {
title: 'Procurar',
};
const styles = StyleSheet.create({
//I took this part off because it is useless for this especific question
});
export default SearchScreen;
And here is the screen 'meo_sw.js':
import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
const meo_sw = props => {
return(
<View style={styles.header}>
<Text style={styles.texto}>Meo Sudoeste</Text>
</View>
)
};
const styles=StyleSheet.create({
header:{
width:'100%',
height:90,
paddingTop:36,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center'
},
texto:{
color:'white',
fontSize: 18
}
})
export default meo_sw;
Please help me

What I would suggest is wrapping the Image in TouchableWithoutFeedback and then adding the onPress on the TouchableWithoutFeedback. https://facebook.github.io/react-native/docs/touchablewithoutfeedback

use hookrouter instead, the modern alternative to react-router: https://www.npmjs.com/package/hookrouter
...
import { useRoutes, usePath, A} from "hookrouter";
navigate('/about');
to answer OP question about navigating from image click:
...
<TouchableOpacity>
<Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image} onPress={() => navigate('/meo_sw')}/>
</TouchableOpacity>
...

You should add:
function xx({navigation}) {}
It worked for me at least!

I think there could be these issues
First pass the navigation in the function searchScreen({navigation}).
Then there is no onPress prop available in <Image> component so use onPress on <TouchableOpacity>.

React Native WebView reload on state change

Error on line 9
I need to change the state (url) for the WebView.
These is an error for my first function...
Any help would be appreciated.
enter image description here
I'm fairly new to this
I need the TouchableOpacity to change the url state on touch.
import React, { Component } from 'react';
import {View, WebView, Dimensions, AppRegistry, StatusBar, Text, TouchableOpacity} from 'react-native';
let ScreenHeight = Dimensions.get("window").height;
let ScreenWidth = Dimensions.get("window").width;
export default class dynamix extends Component {
function setState(obj){
this.state.url = obj.url;
}
function onPressButtonURL1(){
this.setState({ url: 'url1'})
}
function onPressButtonURL2(){
this.setState({ url: 'url2'})
}
function onPressButtonURL3(){
this.setState({ url: 'url3'})
}
render() {
return (
<View>
<View style={{height:ScreenHeight-100, width:ScreenWidth}}>
<WebView style={{
paddingTop:25,
backgroundColor: '#f8f8f8',
width:ScreenWidth,
height:ScreenHeight,
}}
source={{ url: this.state.url }}
/>
<StatusBar hidden />
</View>
<View style={{
backgroundColor:'#131313',
height:100,
width:ScreenWidth
}}>
<View style={{
width:ScreenWidth
}}>
<TouchableOpacity onPress={() => onPressButtonURL1()}><Text style={{color:'#fff', padding:10,fontSize:15}}>"text1"</Text></TouchableOpacity>
<TouchableOpacity onPress={() => onPressButtonURL2()}><Text style={{color:'#fff', padding:10,fontSize:15}}>"text2"</Text></TouchableOpacity>
<TouchableOpacity onPress={() => onPressButtonURL3()}><Text style={{color:'#fff', padding:10,fontSize:15}}>"text3"</Text></TouchableOpacity>
</View>
</View>
</View>
);
}
}
AppRegistry.registerComponent('dynamix', () => dynamix);

import React, { Component } from 'react';
import { Text, View, WebView, TouchableOpacity, Dimensions } from 'react-native';
const {
height: ScreenHeight,
width: ScreenWidth
} = Dimensions.get('window');
export default class dynamix extends Component {
constructor() {
super();
this.state = {
url: 'https://www.google.co.uk'
}
}
onPressButtonURL = (url) => {
this.setState({ url })
}
render() {
return (
<View>
<View style={{height:ScreenHeight-100, width:ScreenWidth}}>
<Text>{this.state.url}</Text>
<WebView style={{
paddingTop:25,
backgroundColor: '#f8f8f8',
width:ScreenWidth,
height:ScreenHeight,
}}
source={{ uri: this.state.url }}
/>
</View>
<View style={{
backgroundColor:'#131313',
height:100,
width:ScreenWidth
}}>
<View style={{
width:ScreenWidth
}}>
<TouchableOpacity onPress={() => this.onPressButtonURL('https://stackoverflow.com')}><Text style={{color:'#fff', padding:10,fontSize:15}}>text1</Text></TouchableOpacity>
<TouchableOpacity onPress={() => this.onPressButtonURL('https://www.google.com')}><Text style={{color:'#fff', padding:10,fontSize:15}}>text2</Text></TouchableOpacity>
<TouchableOpacity onPress={() => this.onPressButtonURL('https://bbc.co.uk')}><Text style={{color:'#fff', padding:10,fontSize:15}}>text3</Text></TouchableOpacity>
</View>
</View>
</View>
);
}
}
AppRegistry.registerComponent('dynamix', () => dynamix);
Edit: I have just seen your attached image, the keyword function is throwing you the error.
If you go to here and paste in
class Person {
function setName(name) {
this.name = name;
}
}
You'll see the Unexpected token (2:11) error. Removing the function keyword works.