Refering to the code below, how can I write it so that when onFocus and onChangeText is called, the value of marginTop changes from 3 to 5?
<Block>
<Text marginTop={3}>TEXT</Text>
<Block>
<Input
keyboardType="phone-pad"
placeholder="Phone number"
defaultValue={details?.phone}
onChangeText={(value) => onChange({ phone: value })}
onFocus?
/>
</Block>
</Block>
Any hint would be greatly appreciated. Thanks in advance.
margin changes when either onChangeText or onFocus is called
const [changeMargin, setChangeMargin] = useState(false) ;
<Block>
<Text marginTop={changeMargin ? 5: 3}>TEXT</Text>
<Block>
<Input
keyboardType="phone-pad"
placeholder="Phone number"
defaultValue={details?.phone}
onChangeText={(value) => { if(value !=null && value.length >0){setChangeMargin(true) ;}else{setChangeMargin(false) ;};
onChange({ phone: value })}}
onFocus={()=>{setChangeMargin(true)}}
/>
</Block>
</Block>
const [move, setMove] = useState(false)
<Block>
<Text marginTop={3}>TEXT</Text>
<Block>
<Input
keyboardType="phone-pad"
placeholder="Phone number"
defaultValue={details?.phone}
onChangeText={(value) => setMove(true)
style={move && /* do something*/}
onFocus?
/>
</Block>
</Block>