We Keep Coding

Cannot read property of 'navigate' of undefined

I am trying to make a stack navigator using reactstack navigation. When the button clicks, it appears on the detail screen only, the title of the page is detail. I am not yet to parsing data array to the next screen, it just tries to navigate the screen into the detail screen, and gets this error. I am new to react. Please help me solve this problem.
import React from 'react'
import {Button, StyleSheet, ScrollView, Text, View} from 'react-native'
import {useState, useEffect} from 'react'
import axios from 'axios'
const Item = ({id, user_id, title, onPress, navigation}) => {
return (
<View style={styles.container}>
<Text style={styles.text}>Id :{id}
</Text>
<Text style={styles.text}>User Id :{user_id}
</Text>
<Text style={styles.text}>Tittle :{title}
</Text>
<View style={styles.container}>
<Button onPress={() => navigation.navigate('Detail')} title='Detail'></Button>
</View>
<View style={styles.line}></View>
</View>
)
}
const Berita = () => {
const [users,
setUsers] = useState([]);
useEffect(() => {
getData();
}, []);
const selectItem = (item) => {
console.log('Selected item: ', item)
}
const getData = () => {
axios
.get('https://gorest.co.in/public/v1/posts')
.then(res => {
console.log('res: ', res);
setUsers(res.data.data);
})
}
return (
<ScrollView style={styles.container}>
{users.map(user => {
return <Item key={user.id} id={user.id} user_id={user.user_id} title={user.title}/>
})}
</ScrollView>
)
}
export default Berita
const styles = StyleSheet.create({
container: {
padding: 15
},
text: {
color: "black",
marginTop: 5,
fontStyle: 'italic',
fontSize: 18,
fontFamily: 'Arial'
},
line: {
height: 1,
backgroundColor: 'black',
marginVertical: 20
},
title: {
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center',
color: "black"
},
tombol: {
padding: 10
}
})
This is the stack screen navigator code
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const DetailBerita = () => {
return (
<Stack.Navigator >
<Stack.Screen
name='Berita'
component={Berita}
options={{
headerTitleAlign: 'center'
}}/>
<Stack.Screen
name="Detail"
component={Detail}
options={{
headerTitleAlign: 'center'
}}/>
</Stack.Navigator>
)
}

It appears that you are using Stack Navigators with different screen names, but you didn't send it. If possible, can you send that file, I would be able to help you a bit better. But from what I have I can try and explain how Stack navigation works. With this line of code:
navigation.navigate('Detail')
You specify that you want to navigate to the screen named "Detail", if you want to navigate to another screen then you can change it to the name of the screen. Let's say you want to navigate to your home screen, and its named "Home" in your Stack.Navigation component. Simply change your navigation to the following:
navigation.navigate('Home')

This is happening because the navigation prop is passed to the Berita component and you are destructuring the property in Item component not in Berita.
So the code should look like
...
const Berita = ({ navigation }) => {
// ...
return (
<ScrollView style={styles.container}>
{users.map(user => {
return (
<Item
key={user.id}
id={user.id}
user_id={user.user_id}
title={user.title}
navigation={navigation} // Pass navigation
/>
);
})}
</ScrollView>
);
};
Another way is - you can just use navigation in onPress (Berita) and pass down onPress to Item component
const Item = ({ id, user_id, title, onPress }) => {
return (
<View style={styles.container}>
<Text style={styles.text}>Id :{id}</Text>
<Text style={styles.text}>User Id :{user_id}</Text>
<Text style={styles.text}>Tittle :{title}</Text>
<View style={styles.container}>
<Button onPress={onPress} title="Detail" />
</View>
<View style={styles.line}></View>
</View>
);
};
const Berita = ({ navigation }) => {
const [users, setUsers] = useState([]);
useEffect(() => {
getData();
}, []);
const selectItem = item => {
console.log('Selected item: ', item);
};
const getData = () => {
axios.get('https://gorest.co.in/public/v1/posts').then(res => {
console.log('res: ', res);
setUsers(res.data.data);
});
};
return (
<ScrollView style={styles.container}>
{users.map(user => {
return (
<Item
key={user.id}
id={user.id}
user_id={user.user_id}
title={user.title}
onPress={() => navigation.navigate('Detail')}
/>
);
})}
</ScrollView>
);
};

Unable to use onPress for navigation inside of nested Screen React Native

Let me begin by saying that I am fairly new to React Native. I have an AppNavigation.js component that holds nested functions for swapping tabbed views using createBottomTabNavigator() -- The issue I am having, is I cannot use a button that I created inside of one of the nested components for the Dashboard Screen. Its stating that my hook is being incorrectly used. I tried numerous approaches from stack overflow sources. Yet, I cannot get the button to navigate to the view after clicking it. How do I navigate to other components while using a nested component for the Screen component?
ERROR:
ReferenceError: Can't find variable: navigation
ProfileCard.js
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import axios from 'axios'
class ProfileCard extends Component {
constructor(props) {
super(props);
this.survey_form = {};
this.state = {
hasSurveyProfile: false
};
}
componentDidMount() {
this.getToken()
.then(obj => axios.get(`http://127.0.0.1:3000/api/v1/check_for_survey_form/${obj.user_id}`, {headers: {Accept: 'application/json', 'X-User-Email': `${obj.email}`, 'X-User-Token': `${obj.authentication_token}`}}))
.then(response => {
this.setState({survey_form: JSON.stringify(response.data)});
this.setState({hasSurveyProfile: true});
})
.catch(error => {
if (error.response.status == 404) {
this.setState({hasSurveyProfile: false})
}
});
}
async getToken(user) {
try {
/////
} catch (error) {
console.log("Something went wrong", error);
}
}
render() {
const { navigation } = this.props;
return(
<View style={{paddingVertical: 5, paddingHorizontal: 5}}>
<View style={{backgroundColor: '#fff', width: Dimensions.get('window').width * .9, minHeight: 50, padding: 2, borderColor: 'gray', borderRadius: 4, borderWidth: 1}}>
<View style={{flexDirection: "row"}}>
<View style={{flex: 1}}>
<Text style={{textAlign: 'center', fontWeight: '500', fontSize: 16}}>Survey Profile</Text>
<Text style={{textAlign: 'center', fontSize: 10}}>Complete your Survey!</Text>
{
(this.state.hasSurveyProfile == false)
? <TouchableOpacity style={styles.buttoncontainer} onPress={() => navigation.navigate('StartSurvey')}>
<Text style={styles.buttontext}>Start Survey</Text>
</TouchableOpacity>
: <TouchableOpacity style={styles.buttoncontainer}>
<Text style={styles.buttontext}>Edit Survey</Text>
</TouchableOpacity>
}
</View>
</View>
</View>
</View>
)
}
}
export default ProfileCard;
AppNavigation.js
import React from 'react'
import { Text, TouchableOpacity, Image, View } from 'react-native'
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import ProfileCard from '../containers/UserProfileCard';
function DashboardScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{flex: 1, alignItems: 'center'}}>
<ProfileCard />
</View>
</View>
);
}
function MessagesScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Messages!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen
name="Dashboard"
component={DashboardScreen}
options={{
tabBarLabel: 'Dashboard',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Messages"
component={MessagesScreen}
options={{
tabBarLabel: 'Messages',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="email-outline" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
}
export default function AppNavigation() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
StartSurvey.js (Unable to get here from button click)
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import axios from 'axios';
import { initMiddleware } from 'devise-axios'
initMiddleware({storage: AsyncStorage})
class StartSurvey extends Component {
constructor(props) {
super(props);
this.state = {
user_id: ''
}
}
componentDidMount() {
this.getToken()
.then(obj => axios.get(`http://127.0.0.1:3000/api/v1/retrieve_user/${obj.user_id}`, {headers: {Accept: 'application/json', 'X-User-Email': `${obj.email}`, 'X-User-Token': `${obj.authentication_token}`}}))
.then(response => {
this.setState({ user: JSON.stringify(response.data)});
this.setState({user_id: JSON.parse(this.state.user).id.toString()})
})
.catch(error => {
console.error(error);
});
}
async getToken(user) {
try {
let userData = await AsyncStorage.getItem("userData");
let data = JSON.parse(userData);
let user = JSON.parse(data)
let userObj = {user_id: JSON.stringify(user.data.data.id), email: JSON.stringify(user.data.data.email), authentication_token: JSON.stringify(user.data.data.authentication_token)}
return userObj
} catch (error) {
console.log("Something went wrong", error);
}
}
render() {
return(
<View style={{paddingVertical: 5, paddingHorizontal: 5}}>
<View style={{backgroundColor: '#fff', width: Dimensions.get('window').width * .9, minHeight: 50, padding: 2, borderColor: 'gray', borderRadius: 4, borderWidth: 1}}>
<Text>Hello Survey!</Text>
</View>
</View>
)
}
}
export default StartSurvey;

So it doesn't look like you're actually passing the navigation prop into the <ProfileCard /> component.
You can pass the navigation function to the <DashboardScreen /> component.
Then inside of the <DashboardScreen /> component, you can pass the same navigation function to the <ProfileCard /> component.
So the code ends up looking something like:
<DashboardScreen navigation={navigation} />
Later on...
<ProfileCard navigation={navigation} />
EDIT:
You'll likely need to change the way you're passing the <DashboardScreen /> component to the <Tab.Screen> component, making it a child of <Tab.Screen>
Something that looks like:
<Tab.Screen>
// Your other props here...
<DashboardScreen navigation={navigation} />
</Tab.Screen>

React native, undefined is not an object And handle onChange

I made 2 screens home and editing screen. I want to change values from edit screen without redux and context but I don't know how? and also when I click save in editscreen it's throwing error that undefined is not an object (evaluating '_this.props.navigation.goBack') and displaing blank home screencwhy that's happening. Can some one help me please, below is my code
home.js
class Home extends Component {
state = {
modal: false,
editMode: false.
post: [
{
key: "1",
title: "A Good Boi",
des: "He's a good boi and every one know it.",
image: require("../assets/dog.jpg"),
},
{
key: "2",
title: "John Cena",
des: "As you can see, You can't see me!",
image: require("../assets/cena.jpg"),
},
],
};
addPost = (posts) => {
posts.key = Math.random().toString();
this.setState((prevState) => {
return {
post: [...prevState.post, posts],
modal: false,
};
});
};
onEdit = (data) => {
this.setState({ post: { title: data }, editMode: false });
};
render() {
if (this.state.editMode)
return <EditScreen item={item} onEdit={this.onEdit} />;
return (
<Screen style={styles.screen}>
<Modal visible={this.state.modal} animationType="slide">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.modalContainer}>
<AddPost addPost={this.addPost} />
</View>
</TouchableWithoutFeedback>
</Modal>
<FlatList
data={this.state.post}
renderItem={({ item }) => (
<>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => this.setState({ editMode: true })}
style={styles.Edit}
>
<MaterialCommunityIcons
name="playlist-edit"
color="green"
size={35}
/>
</TouchableOpacity>
<Card>
<Image style={styles.image} source={item.image} />
<View style={styles.detailContainer}>
<Text style={styles.title} numberOfLines={1}>
{item.title}
</Text>
<Text style={styles.subTitle} numberOfLines={2}>
{item.des}
</Text>
</View>
</Card>
</>
)}
/>
</Screen>
Edit.js
import React, { Component } from "react";
import { View, StyleSheet, Image, KeyboardAvoidingView } from "react-native";
import colors from "../config/colors";
import AppButton from "../components/AppButton";
import AppTextInput from "../components/AppTextInput";
class EditScreen extends Component {
render() {
const { item, onEdit, onClose } = this.props;
return (
<KeyboardAvoidingView
behavior="position"
keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 100}
>
<Image style={styles.image} source={item.image} />
<View style={styles.detailContainer}>
<AppTextInput value={item.title} />
<AppTextInput value={item.des} />
</View>
<AppButton
text="Save"
onPress={() => {
onEdit(this.state);
}}
/>
</KeyboardAvoidingView>
);
}
}
export default EditScreen;
AppTextInput.js
function AppTextInput({ icon, width = "100%", ...otherProps }) {
return (
<View style={[styles.container, { width }]}>
<TextInput
placeholderTextColor={defaultStyles.colors.medium}
style={defaultStyles.text}
{...otherProps}
/>
</View>
);
}

Try this:
Edit.js
import React, { Component } from 'react';
import { View, StyleSheet, Image, KeyboardAvoidingView } from 'react-native';
import colors from '../config/colors';
import AppButton from '../components/AppButton';
import AppTextInput from '../components/AppTextInput';
class EditScreen extends Component {
constructor(props) {
super(props);
this.state = { ...props.item };
}
render() {
const { onEdit, onClose } = this.props;
const { title, des, image } = this.state;
return (
<KeyboardAvoidingView
behavior="position"
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 100}>
<Image style={styles.image} source={image} />
<View style={styles.detailContainer}>
<AppTextInput
value={title}
onChangeText={text => this.setState({ title: text })}
/>
<AppTextInput
value={des}
onChangeText={text => this.setState({ des: text })}
/>
</View>
<AppButton text="Save" onPress={() => onEdit(this.state)} />
</KeyboardAvoidingView>
);
}
}
export default EditScreen;
onEdit
onEdit = data => {
const newPosts = this.state.post.map(item => {
if(item.key === data.key) return data;
else return item;
})
this.setState({ post: newPosts, editMode: false });
};

Only the direct children of a navigator can access
this.props.navigation
If you want to access that inside the edit screen you can pass it from the Home screen as a prop. Like so:
return <EditScreen item={item} onEdit={this.onEdit} navigation={this.props.navigation} />;
But i don't think you need to go back because you are still on the Home page and just rendering the EditScreen within it. So just changing the state to have editMode: false should be enough

Getting JSON Parse error: Unexpected identifier "undefined" when using React native & React navigation?

I am pretty new to React Native, so if the question seems stupid i am sorry in advance, i have been trying for hours to get this to work before asking this question.
I am trying to pass data from a text input to the next screen using firebase database.
I keep getting the error JSON Parse error: Unexpected identifier "undefined", I have attached below my two files, one with the text input (InputForm.js) and the other one which i want to show that data on the screen (ASTConfig1screen)
If anyone can help with this you really are a superstar!
InputForm.js
import React, { Component } from 'react';
import { StyleSheet, ScrollView, ActivityIndicator, View, TextInput } from 'react-native';
import { Button } from 'react-native-elements';
import firebase from '../Firebase';
import { withNavigation } from 'react-navigation';
class InputForm extends Component {
constructor() {
super();
this.ref = firebase.firestore().collection('boards');
this.state = {
name: '',
inventoryclass: '',
outlet: '',
isLoading: false,
};
}
updateTextInput = (text, field) => {
const state = this.state
state[field] = text;
this.setState(state);
}
saveBoard() {
this.setState({
isLoading: true,
});
this.ref.add({
name: this.state.name,
inventoryclass: this.state.inventoryclass,
outlet: this.state.outlet,
}).then((docRef) => {
this.setState({
name: '',
outlet: '',
inventoryclass: '',
isLoading: false,
});
this.props.navigation.navigate('ASTConfig1');
})
.catch((error) => {
console.error("Error adding document: ", error);
this.setState({
isLoading: false,
});
});
}
render() {
if(this.state.isLoading){
return(
<View style={styles.activity}>
<ActivityIndicator size="large" color="#ffa500"/>
</View>
)
}
return (
<ScrollView style={styles.container}>
<View style={styles.subContainer}>
<TextInput style={styles.inputtext}
placeholder={'Name'}
placeholderTextColor="white"
value={this.state.name}
onChangeText={(text) => this.updateTextInput(text, 'name')}
/>
</View>
<View style={styles.subContainer}>
<TextInput style={styles.inputtext}
multiline={true}
numberOfLines={4}
placeholder={'Inventory Class'}
placeholderTextColor="white"
value={this.state.inventoryclass}
onChangeText={(text) => this.updateTextInput(text, 'inventoryclass')}
/>
</View>
<View style={styles.subContainer}>
<TextInput style={styles.inputtext}
placeholder={'Outlet'}
placeholderTextColor="white"
value={this.state.outlet}
onChangeText={(text) => this.updateTextInput(text, 'outlet')}
/>
</View>
<View style={styles.button}>
<Button
large
leftIcon={{name: 'save'}}
title='Save'
onPress={() => this.saveBoard()} />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20
},
subContainer: {
flex: 1,
marginBottom: 20,
padding: 5,
borderBottomWidth: 2,
borderBottomColor: '#CCCCCC',
},
inputtext: {
color: 'white',
fontSize: 20
},
activity: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
})
export default withNavigation(InputForm);
and this is where i would like to show the data on this screen
ASTConfig1.js
import React from 'react';
import {
View,
Text,
StyleSheet,
Button,
ImageBackground,
StatusBar,
SafeAreaView,
TextInput,
ScrollView,
UIManager,
ActivityIndicator
}
from 'react-native';
import {AccordionList} from "accordion-collapse-react-native";
import { Separator } from 'native-base';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import firebase from '../Firebase';
import Logo from '.././components/Logo';
import Colors from '.././constants/Colors';
import Search from '.././components/Search';
import InputForm from '.././components/InputForm';
class ASTConfig1Screen extends React.Component {
static navigationOptions = {
title: 'ASTConfig1',
};
constructor(props) {
super(props);
this.state= {
isLoading: true,
board: {},
key: '',
status:true,
text: '',
list:[
{
title: 'Getting Started',
body: 'React native Accordion/Collapse component, very good to use in toggles & show/hide content'
},
{
title: 'Components',
body: 'AccordionList,Collapse,CollapseHeader & CollapseBody'
},
{
title: 'Test',
body: 'AccordionList,Collapse,CollapseHeader & CollapseBody'
}
],
}
}
componentDidMount() {
const { navigation } = this.props;
const ref = firebase.firestore().collection('boards').doc(JSON.parse(navigation.getParam('boardkey')));
ref.get().then((doc) => {
if (doc.exists) {
this.setState({
board: doc.data(),
key: doc.id,
isLoading: false
});
} else {
console.log("No such document!");
}
});
}
_head(item){
return(
<Separator bordered style={{alignItems:'center'}}>
<Text>{item.title}</Text>
</Separator>
);
}
_body(item){
return (
<View style={{padding:10}}>
<Text style={{textAlign:'center'}}>{item.body}</Text>
</View>
);
}
ShowHideTextComponentView = () =>{
if(this.state.status == true)
{
this.setState({status: false})
}
else
{
this.setState({status: true})
}
}
render() {
if(this.state.isLoading){
return(
<View style={styles.activity}>
<ActivityIndicator size="large" color="#0000ff" />
</View>
)
}
return (
<View style={styles.screen}>
<ImageBackground
source={require('.././assets/Img/BackGround2.png')}
style={styles.background}>
</ImageBackground>
<SafeAreaView>
<View style={{flex: 1, justifyContent: 'space-between', width: wp('80%')}}>
<View style={styles.logotop}>
<Logo/>
</View>
<View style={styles.editstock}>
<Text style={styles.editstocktext}>EDIT STOCK LIST:</Text>
</View>
{/*Start of 3 buttons Firebase*/}
<View style={styles.three}>
<View style={styles.edit1}>
<Text style={styles.textheader}>{this.state.board.name}</Text>
<Button style={styles.edit} title='Edit' ></Button>
</View>
<View style={{padding: 3}}></View>
<View style={styles.edit2}>
<Text style={styles.text}>{this.state.board.inventoryclass}</Text>
<Button style={styles.edit} title='Edit' ></Button>
</View>
<View style={styles.edit3}>
<Text style={styles.text}>{this.state.board.outlet}</Text>
<Button style={styles.edit} title='Edit' ></Button>
</View>
</View>
{/*End of 3 buttons Firebase*/}
{/*Start of AccordionList*/}
<ScrollView>
<View style={styles.middle}>
<AccordionList
list={this.state.list}
header={this._head}
body={this._body}
/>
</View>
</ScrollView>
{/*End of AccordionList*/}
{/*Start of Search*/}
<View>
{
this.state.status ? null : <View style={styles.bottom}>
<Text style={styles.textbottom}>SEARCH FOR NEW ITEMS:</Text>
<Search />
</View>
}
<Button title="ADD" onPress={this.ShowHideTextComponentView} />
</View>
</View>
</SafeAreaView>
</View>
);
};
};
{/*End of Search*/}
export default ASTConfig1Screen;
but it returns the error - Error adding document: [SyntaxError: SyntaxError: SyntaxError: JSON Parse error: Unexpected identifier "undefined"

in inputform.js saveBoard function you should
this.props.navigation.navigate('Details', {
'ASTConfig1': docRef
});
and remove JSON.parse form other file

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.