Can not show Toast with Galio-Framework - react-native

Question

I'm init a test app whith expo-cli.
Install galio-framework
And put one of Toast in screens.But not show anything.
Is my code wrong?
this is my code in App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View,Button } from 'react-native';
import {Toast,Block} from 'galio-framework';
export default function App() {
let isShow= true;
const { useNativeDriver } = this.props;
// const [isShow, setShow] = useState(false);
const setShow = (v)=>{
console.log("show change "+v);
isShow= v;
}
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<Button shadowless onPress={() => setShow(!isShow)} style={styles.btnCC}>click here for toast notifications</Button>
<Block style={styles.bl}>
<Toast isShow={true} positionIndicator="top">This is a top positioned toast</Toast>
<Toast isShow={isShow} positionIndicator="center" color="success">This is a center positioned toast</Toast>
</Block>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
bl:{
flex: 1,
height:200,
width:100,
// alignItems: 'center',
// justifyContent: 'center',
},
btnCC:{
width:200,
backgroundColor: '#006600',
}
});
Is my code wrong?Or is the framework bug?

Answer 1

isShow variable must be React state. Change code like this
export default function App() {
const [isShow, setShow] = React.useState(false)
const { useNativeDriver } = this.props;
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<Button shadowless onPress={() => setShow(!isShow)} style={styles.btnCC}>click here for toast notifications</Button>
<Block style={styles.bl}>
<Toast isShow={true} positionIndicator="top">This is a top positioned toast</Toast>
<Toast isShow={isShow} positionIndicator="center" color="success">This is a center positioned toast</Toast>
</Block>
</View>
);
}