React Native - Animation de la réduction de la largeur
Dans l'en-tête de mon React application native, j'ai une icône conditionnelle et un barre de recherche .
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle: (
<View
style={{
flex: 1,
backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
height: StatusBar.currentHeight,
}}>
{params.isIconTriggered && <Icon name="chevron-left" size={28} />}
<SearchBar
round
platform={'default'}
placeholder="Search"
containerStyle={{
flex: 1,
backgroundColor: 'transparent',
}}
/>
</View>
),
headerStyle: {
backgroundColor: '#e54b4d',
},
};
};
Normalement, la barre de recherche prendra toute la largeur de l'en-tête, ce que je veux. Si la condition isIconTriggered est vraie, une icône apparaîtra devant la barre de recherche et la largeur de la barre de recherche diminuera suffisamment pour que l'icône soit visible à côté d'elle.
Cependant, il n'y a pas de transition ou d'animation lorsque cela se produit et cela ne semble ni agréable ni agréable. Je voudrais ajouter une animation à la barre de recherche afin que la largeur diminue progressivement et en douceur lorsque la condition est déclenchée et que l'icône apparaît.
Est-il possible d'y parvenir et comment puis-je y parvenir?