I am using native base input fields in my app like this:
const [startingPoint, setStartingPoint] = useState('');const [endingPoint, setEndingPoint] = useState('');<Input placeholder="My Input Value" onChangeText={text => setEndingPoint(text)} value={endingPoint}/>
These values are wrapped inside View and Modals. Not any Form.
The inputting feature itself works correctly. However, when I exit the page (as in click back or cancel in my app) and come back, the values I wrote previously in the fields are still there. Is there any way I can reset them every time I exit the page?
This is how my modal looks like:
export const JourneyDetailsPage: React.FunctionComponent<JourneyDetailsPageProps> = ({ toggleShowPage, showJourneyDetailsPage,}) => { const [startingPoint, setStartingPoint] = useState(''); const [endingPoint, setEndingPoint] = useState(''); const [showAvailableTripsPage, setShowAvailableTripsPage] = useState(false); const toggleAvailableTripsPage = () => { setShowAvailableTripsPage(showAvailableTripsPage ? false : true); }; return (<Modal visible={showJourneyDetailsPage} animationType="slide" transparent={true}><SafeAreaView><View style={scaledJourneyDetailsStyles.container}><View style={scaledJourneyDetailsStyles.searchTopContainer}><View style={scaledJourneyDetailsStyles.searchTopTextContainer}><Text onPress={toggleShowPage}> Cancel</Text><Text> Location</Text><Text> Done</Text></View><View><Item rounded style={scaledJourneyDetailsStyles.searchField}><Icon name="map-marker" color="green" /><Input placeholder="Start" onChangeText={text => setStartingPoint(text)} value={startingPoint} /></Item><Item style={scaledJourneyDetailsStyles.searchField}><Icon name="search" color="blue" /><Input placeholder="End" onChangeText={text => setEndingPoint(text)} value={endingPoint} /></Item></View><View style={scaledJourneyDetailsStyles.offerContainer}><Text style={scaledJourneyDetailsStyles.offerText} onPress={() => setShowAvailableTripsPage(true) } >Go</Text><Text style={scaledJourneyDetailsStyles.offerText}>1 Person</Text></View></View><AvailableTripsPage showAvailableTripsPage={showAvailableTripsPage} toggleShowPage={toggleAvailableTripsPage} /></View></SafeAreaView></Modal> );};