I installed #haskkor/react-native-pincode and when I try to use the PINCode component, it gives me this error: enter image description here
This is my code
import PINCode from '#haskkor/react-native-pincode'
function PasscodeContainer() {
const { Common } = useTheme()
const { passcodeContainer } = Common
const [value, setValue] = useState('')
const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT })
const [props, getCellOnLayoutHandler] = useClearByFocusCell({
value,
setValue,
})
const result = useGetUserQuery()
console.log({ result })
return (
<View style={passcodeContainer.container}>
<MyStatusBar backgroundColor="transparent" barStyle="default" />
<ScrollView contentContainerStyle={passcodeContainer.scrollview}>
<View style={{ height: APPBAR_HEIGHT }}></View>
<View style={passcodeContainer.container}>
<Text style={passcodeContainer.subTitle}>Enter PIN Code</Text>
<PINCode storePin={true} status="choose" />
</View>
</ScrollView>
</View>
)
}
When I comment the PINCode component, no error is displayed.
Related
I use react-native-image-header-scroll-view but renderHeader to display the image but after using it it seems that FlastList is not working
here is my code
import React from 'react';
import {
ImageHeaderScrollView,
TriggeringView,
} from 'react-native-image-header-scroll-view';
const MAX_HEIGHT = 400;
const MIN_HEIGHT = Platform.OS == 'ios' ? 90 : 55;
const ProductDetailScreen = ({route}) => {
return (
<View style={{backgroundColor: colors.bodyColor, flex: 1}}>
<ImageHeaderScrollView
maxHeight={MAX_HEIGHT}
minHeight={MIN_HEIGHT}
renderHeader={() => (
<ProductDetailImage route={route} />
)}></ImageHeaderScrollView>
</View>
);
};
export default ProductDetailScreen;
ProductDetailImage
import React, {useRef, useState} from 'react';
const windowWidth = Dimensions.get('window').width;
const ProductDetailImage = ({route}) => {
const {product} = route.params;
const [currentSate, setCurrentState] = useState(0);
const ref = useRef();
const updateCurrentState = e => {
const contentOffsetX = e.nativeEvent.contentOffset.x;
const currentSate = Math.round(contentOffsetX / windowWidth);
setCurrentState(currentSate);
};
return (
<View
style={{
backgroundColor: colors.white,
}}>
<FlatList
horizontal={true}
ref={ref}
onMomentumScrollEnd={updateCurrentState}
pagingEnabled={true}
decelerationRate="fast"
showsHorizontalScrollIndicator={false}
data={product.image}
renderItem={({item, index}) => {
return (
<View key={index}>
<Image
source={{uri: item}}
style={{width: windowWidth, height: 400}}
/>
</View>
);
}}
...
);
};
export default ProductDetailImage;
I want the renderHeader to be able to scroll the image
if I remove the ProductDetailImage from the renderHeader everything works fine again
How to send data in previous screen with help of goBack() ?
I tried already. For ex: this.props.navigation.navigate('Login', {name: this.state.name})
If you simply want to pass data to the previous screen then the below works:
Parent screen:
const Parent = () => {
const [data, setData] = useState("");
let navigation = useNavigation();
const onPress = () => {
navigation.navigate('Second', { getData: (x)=>setData(x) }); //<---here you have to pass callback function
};
return (
<View style={{ flex: 1 }}>
<Button
onPress={onPress}
title="Add title here"
color="#841584"
disabled={false}
/>
<Text>{data}</Text>
</View>
);
};
Child screen:
const Child = ({ route }) => { //<------here need to take route
let navigation = useNavigation();
const onPress = () => {
let data = "John";
route.params.getData(data); //<-----this way to update.
navigation.goBack();
};
return (
<View style={{ flex: 1 }}>
<Button
onPress={onPress}
title="Add title here"
color="#841584"
disabled={false}
/>
</View>
);
};
I'm sure its a stupid mistake somewhere but when I switch between class component to functional (to learn/understand how state works in both of these) I kind of miss the logic sometimes (with this.props etc). (home.js navigates to the page called addDiary.js)
I'm not finished with the async logic/code but don't understand why I get the error "cant find variable: diary" at this point, thank you
Home.js
const Home = ({navigation}) => {
const [refreshing, setRefreshing] = useState(false);
const [diary, setDiary] = useState(null)
whenRefresh = async () => {
try{
setRefreshing(true);
const diary = await AsyncStorage.getItem('diary')
setDiary(JSON.parse('diary'))
setRefreshing(false)}
catch (error) {console.log(error)}
}
return(
<View style={styles.home}>
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={whenRefresh}/>}
style={styles.body}>
{diary ? <ListItem
title={diary.title}
subtitle="test"
onPress={()=>{console.log("listitem pressed")}}
/> : null}
addDiary.js
const AddDiary = () => {
const [title, setTitle] = useState()
const [body, setBody] = useState()
const submit = async () => {
const diary = {title, body}
await AsyncStorage.setItem('diary', JSON.stringify(diary))
navigation.goBack()
}
return(
<SafeAreaView style={styles.home}>
<View style={styles.group}>
<Text style={styles.label}>Title:</Text>
<TextInput
placeholder="title"
style={styles.titleInput}
onChangeText={setTitle}
value={title}
/>
</View>
<View style={[styles.group, {flex:1}]}>
<Text style={styles.label}>Body:</Text>
<TextInput
placeholder="title"
style={[styles.titleInput, {height: 300}]}
onChangeText={setBody}
value={body}
/>
</View>
<Button
name="check-circle"
size={50}
color="black"
onPress={submit}
/>
</SafeAreaView>
)
}
const submit = async () => {
const diary = {title, body}
await AsyncStorage.setItem('diary',JSON.stringify(diary))
}
Change your submit function to this.
and it should work fine
const Home = ({navigation}) => {
const [refreshing, setRefreshing] = useState(false);
const [diary, setDiary] = useState(null)
whenRefresh = async () => {
setRefreshing(true);
const diary = await AsyncStorage.getItem('diary')
setDiary(JSON.parse('diary'))
setRefreshing(false)
}
return(
<View style={styles.home}>
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={whenRefresh}/>}
style={styles.body}>
{diary ? <ListItem
title={diary.title}
subtitle="test"
onPress={()=>{console.log("listitem pressed")}}
/> : null}
I'm really new to React Native and I'm wondering how can I hide/show View
Here's my test code:
class Counter extends React.Component{
state = { count:0 };
setCount = () => this.setState(
prevState => ({ ...prevState, count: this.state.count + 1 })
)
render(){
const { count } = this.state;
const [valueLocation, onChangeText] = React.useState('Pleas input Address');
const [value, onChangeEvent] = React.useState('Your questions');
return (
<ScrollView style={styles.header}>
<View style={styles.box1}>
<View style={styles.box2}>
<View style={styles.user}>
<Image
style={styles.userImg}
source={{
uri: event.user[0].image,
}}
/>
<View style={styles.userText}>
<Text style={styles.username}>{event.user[0].name}</Text>
<Text style={styles.date}>{event.user[0].date}</Text>
</View>
</View>
<View style={styles.boxHidebtn}>
<View style={styles.EventClass}>
<Text style={styles.btn_text_white}>類型</Text>
</View>
<TouchableOpacity
style={styles.EventOpen}
onPress={this.setCount}
>
<Text>></Text>
</TouchableOpacity>
</View>
</View>
<View style={count % 2 ? styles.box3 : styles.box3Open}>
<Text style={styles.address}>台北市市民大道六段37號</Text>
<Text style={styles.eventShow}>路上坑洞造成積水</Text>
</View>
</View>
</ScrollView>
);
}
}
const App = () => {
<Counter/>
};
const styles = StyleSheet.create({
....
});
export default App;
I run my code and it tell me
"App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
thanks!!!!!!!!
It looks like your arrow function needs to return the Counter:
const App = () => {
return <Counter/>;
};
Or, simply:
const App = () => <Counter/>;
I can see three errors in your code:
const App = () => {
return <Counter/>; // here you should return Counter
};
prevState -> this.state I guess
setCount = () => this.setState({ ...this.state, count: this.state.count + 1 }); // here
you have also a syntax error <Text>></Text> remove this extra closing > inside touchableopacity
Regarding your question in the title? I can't see where you want to hide the view?
I want when text input is empty change border color to red with press button:
const post = () => {
let list = [];
if (homeAge === '') {
list.push('homeage')
}
}
<TextInput
style={[Styles.TextInput, { borderColor: list.includes('homeage') ? 'red' : '#006d41' }]}
onChangeText={(event) => homeAgeHandler(event)}
/>
<Button style={Styles.Button}
onPress={() => post()}>
<Text style={Styles.TextButton}>ثبت اطلاعات</Text>
</Button>
Use a useRef hook :
const ref=useRef(0);
const post = () => {
let list = [];
if (homeAge === '') {
list.push('homeage')
}
}
useEffect(()=>{
if(list.size==0&&ref.current)
{
ref.current.style.borderColor = "red";
}
},[list,ref]);
<TextInput ref={ref}
onChangeText={(event) => homeAgeHandler(event)}
/>
<Button style={Styles.Button}
onPress={() => post()}>
<Text style={Styles.TextButton}>ثبت اطلاعات</Text>
</Button>
Here is a simple example to validate text and change styling based on validation,
const App = () => {
const [text, setText] = useState("");
const [error, setError] = useState(false);
const validateText = () => {
if (text === "") {
setError(true);
} else {
setError(false);
}
};
return (
<View>
<TextInput style={[Styles.TextInput, { borderColor: error ? 'red' : '#006d41', borderWidth:'1px'}]}
onChangeText={setText}
/>
<Button style={Styles.Button}
onPress={validateText}>
<Text style={Styles.TextButton}>ثبت اطلاعات</Text>
</Button>
</View>
);
};
export default App;
TextInput empty:
TextInput not empty:
Use state instead.
Also, In the given example, you are trying to access the list which is the local variable of the post() method.
Here is the alternate solution:
export default function App() {
const [homeAge, setHomeAge] = useState('');
return (
<View style={styles.container}>
<TextInput
value={homeAge}
style={[
styles.textInput,
{ borderColor: !homeAge ? 'red' : '#006d41' },
]}
onChangeText={(text) => setHomeAge(text)}
/>
<Button title={'ثبت اطلاعات'} style={styles.button} onPress={() => {}} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
textInput: {
padding: 10,
borderWidth: 1,
},
});
Working example: Expo Snack