I want to use the colors from my react native paper theme inside the stylesheet create function inside my component. Here's my code
import { StyleSheet, Text, View } from 'react-native';
import { useTheme } from 'react-native-paper';
const Home = () => {
const { colors } = useTheme();
return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<Text>Home Page</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default Home;
I want to have the backgroundColor: "#fff" in the stylesheet to reference the colors.background coming from the useTheme hook. Is this possible?
I prefer to use it like this
const makeStyles = (colors: any) => StyleSheet.create({
container: {
backgroundColor: colors.red,
}
})
then, in render()
const Home = () => {
const { colors } = useTheme();
const styles = makeStyles(colors)
return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<Text>Home Page</Text>
</View>
);
}
https://stackoverflow.com/a/65259425/8142053
I found this answer very recently from StackOverflow, according to that you can write a customHook and use it inside the custom hook. Please view his answer for a clear understanding.
Related
I am trying to make a reusable text input component, but I want to grab the value that the user types to manipulate it on the App.js
TextInputComponent.js
import React, {useState} from 'react';
import { StyleSheet, View, TextInput } from 'react-native'
const TextInputComponent = (props) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={onChangeText} placeholder="Enter"/>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: 50,
width: 200,
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: "black",
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default TextInputComponent
App.js
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import TextInputComponent from './src/components/TextInputComponent';
export default function App() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row' }}>
<Text>Test</Text>
<TextInputComponent/>
<Button title="A" onPress={()=> console.log(-------> text value from TextInputComponent <-----)}></Button>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
In order to access the state value created on the TextInputComponent.js what do I need to do?
One thing you can do is to pass a custom method through to the component and then use it as the onChangeText method:
const TextInputComponent = ({ customMethod }) => {
const [text, onChangeText] = useState("")
return (
<View>
<TextInput style={styles.container} value={text} onChangeText={(txt) => customMethod(txt)} placeholder="Enter"/>
</View>
)
}
Then in App.js you have the method:
customMethod = (txt) => {
// do something with txt variable
}
and:
<TextInputComponent customMethod={customMethod} />
Might require some tweaking to get it to work (I didn't test it), but that's the general idea.
I am new to react native and want to create three Components. for Increment Button, Decrement Button and to display Counter value.
State/Hook should remain in the App Component. I don't want to Modify that.
import React, {useState} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default function App() {
const [getIncCounter, setIncCounter] = useState(0)
const inc = () => {
setIncCounter(getIncCounter + 1);
}
const dec = () => {
setIncCounter(getIncCounter - 1);
}
return (
<View style={styles.container}>
<View style={{flexDirection: 'row'}}>
<Button title="+" onPress={inc} />
<Text> {getIncCounter} </Text>
<Button title="-" onPress={dec} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Here is how you can create a separate component for increase/decrease buttons and a component for showing results.
import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default function App() {
const [getIncCounter, setIncCounter] = useState(0);
const inc = () => {
setIncCounter(getIncCounter + 1);
};
const dec = () => {
setIncCounter(getIncCounter - 1);
};
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row' }}>
<ButtonComponent title={'+'} onClick={inc} />
<ResultComponent result={getIncCounter} />
<ButtonComponent title={'-'} onClick={dec} />
</View>
</View>
);
}
const ButtonComponent = ({ onClick, title }) => {
return (
<div>
<Button title={title} onPress={onClick} />
</div>
);
};
const ResultComponent = ({ result }) => {
return (
<div>
<Text> {result} </Text>
</div>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
It's redundant though, but if you want to learn how to pass props and stuff it is fine. Button and Text are components themselves.
Expo Snack Example
I am having a problem with my button. i have just started learning reactnative.
import { StatusBar } from 'expo-status-bar';
import React,{ useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
export default function App() {
const [name, setName] = useState('Hamza');
const clickHandler= () => {
setName('Awais');
};
return (
<View style={styles.container}>
<Text >My Name is { name }</Text>
<Text></Text>
<View style={styles.buttonContainer}>
<Button title='update State' onPress={ clickHandler }/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer:{
marginTop:20,
},
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Try this way
<Button title='update State' onPress={() => clickHandler() } />
I'm trying to update an app I've developed using react-navigation v4.
Using react-navigation v4 I could get the id using something like console.log(navigation.getParam('id'));
But when I tried the same after updating to v5 of react-navigation it shows me an error and I can't find the right way to get the param id
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ShowScreen({ navigation }) {
console.log(navigation.getParam('id'));
return (
<View style={styles.container}>
<Text>Show Screen</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
The other screen where the id is located is it:
import React, { useContext } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
import { Context } from '../../context/BlogContext';
import Icon from 'react-native-vector-icons/Feather'
export default function IndexScreen({ navigation }) {
const { state, addBlogPost, deleteBlogPost } = useContext(Context);
return (
<View style={styles.container}>
<Button
title="Add Post"
onPress={addBlogPost}
/>
<FlatList
data={state}
keyExtractor={(blogPost) => blogPost.title}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={
() => navigation.navigate('ShowScreen',
{ id: item.id })}>
<View style={styles.row}>
<Text style={styles.title}>
{item.title} -
{item.id}
</Text>
<TouchableOpacity onPress={() => deleteBlogPost(item.id)}>
<Icon style={styles.icon}
name="trash"
/>
</TouchableOpacity>
</View>
</TouchableOpacity>
);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 30,
justifyContent: 'center',
alignItems: 'center'
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
paddingVertical: 20,
borderTopWidth: 1,
borderColor: '#333'
},
title: {
fontSize: 18
},
icon: {
fontSize: 24
}
});
You can get params using route.params in react navigation v5 more on that read here
just update your code to this
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ShowScreen({ navigation,route }) {
const {id} =route.params; //you will get id here via route
return (
<View style={styles.container}>
<Text>Show Screen</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
you can simply access your parameters like this
const id = this.props.route.params.id
inside this.props.route.params you will get all paramaters :)
I have problem in changing value of state.It gives mi following error
"Undefine is not a function(evaluating '
this.setState({
switchValue:false
})')"
I have search on stack overflow but the solution is not work for me.
import React, { Component } from 'react';
import {
Alert,
AppRegistry,
StyleSheet,
Text,
View,
Switch
} from 'react-native';
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {switchValue: true};
// Toggle the state every second
}
_onPressButton() {
this.setState({
switchValue: false
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Switch
onValueChange={this._onPressButton}
value={this.state.switchValue }
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
The this inside _onPressButton is not referencing the correct reference. On that case, this inside that _onPressButton is actually reference the button. You can either do this two ways.
<Switch
onValueChange={this._onPressButton.bind(this)}
value={this.state.switchValue }
/>
Or
<Switch
onValueChange={() => this._onPressButton()}
value={this.state.switchValue }
/>