Looking for help with implementing a disappearing search bar functionality when scrolling? Check out the following code snippets and examples that demonstrate how to achieve this feature:
showSearchBarIOS = () => {
return (
<View style={styles.containerSearchBarIOS}>
<Icon name="search" size={20} style={{ marginLeft: 5 }} />
<TextInput
style={styles.textInputIos}
value={this.state.text}
autoCorrect={false}
returnKeyType="done"
onChangeText={this.submitText}
placeholder="Buscar..."
placeholderTextColor={GRIS_DEFAULT}
/>
<Text>{this.props.texto}</Text>
</View>
);
};
showSearchBarAndroid = () => {
return (
<View style={styles.containerSearchBarAndroid}>
<Icon
name="search"
size={25}
style={{ marginLeft: 5, marginBottom: 3 }}
/>
<TextInput
style={styles.textInputAndroid}
value={this.state.text}
autoCorrect={false}
returnKeyType="done"
onChangeText={text => this.setState({ text: text })}
placeholder="Buscar Diputados..."
placeholderTextColor={GRIS_DEFAULT}
/>
</View>
);
};
showList = () => {
return (
<View style={{ flex: 1 }}>
{Platform.OS === "ios"
? this.showSearchBarIOS()
: this.showSearchBarAndroid()}
<RecyclerListView
layoutProvider={this._layoutProvider}
dataProvider={this.props.dataProvider}
rowRenderer={this._rowRenderer}
scrollViewProps={{
refreshControl: (
<RefreshControl
refreshing={this.props.diputadosNomina.isFetching}
onRefresh={this.props.fetchDiputadosNomina}
colors={[REFRESH_CONTROL_COLOR]}
tintColor={REFRESH_CONTROL_COLOR}
/>
)
}}
/>
</View>
);
};
container: {
flex: 1,
backgroundColor: PAGE_BACKGROUND_COLOR
},
containerSearchBarIOS: {
flexDirection: "row",
alignItems: "center",
height: 30,
padding: 0,
marginLeft: 6,
marginRight: 6,
marginTop: 5,
backgroundColor: BACKGROUND_SEARCH_BAR,
borderWidth: 1,
borderColor: GRIS_DEFAULT,
borderRadius: 60
},
containerSearchBarAndroid: {
flexDirection: "row",
alignItems: "center",
height: 40,
padding: 0,
marginLeft: 2,
marginRight: 2,
marginBottom: 5,
marginTop: 5,
backgroundColor: BACKGROUND_SEARCH_BAR,
borderWidth: 1,
borderColor: GRIS_DEFAULT,
borderRadius: 60
},
textInputIos: {
fontSize: 14,
fontFamily: Roboto_Regular,
width: "90%",
padding: 2
},
textInputAndroid: { fontSize: 13, fontFamily: Roboto_Regular, width: "90%" }