react-navigation-search-layout
A plain but perfectly acceptable search layout screen that looks good on iOS and Android.
This repo is Forked from the react-navigation-addon-search-layout and add some handlers and props to fit my needs
Installation
npm install react-navigation-search-layout
This requires that you have react-native-vector-icons
installed in
your project, it uses the Ionicons
font family. If you use the Expo
managed workflow, it will work out of the box as that comes preinstalled
and is available through @expo/vector-icons
'.
Usage
Here's an example of how you can use this:
;;;;;; Component static title: 'Home' headerRight: <BorderlessButton onPress= navigation style= marginRight: 15 > <Ionicons name="md-search" size=PlatformOS === 'ios' ? 22 : 25 color=SearchLayoutDefaultTintColor /> </BorderlessButton> ; { return <View style=stylescontainer> <Text>Hello there!</Text> </View> ; } Component static navigationOptions = title: 'Result' ; { return <View style=stylescontainer> <Text>thispropsnavigation result!</Text> </View> ; } Component static navigationOptions = header: null ; state = searchText: null ; { this; }; { ; }; { let searchText = thisstate; return <SearchLayout onClearQuery= { console } onBackButtonPressed= { console } onChangeQuery=this_handleQueryChange onSubmit=this_executeSearch> searchText ? <RectButton style= borderBottomWidth: StyleSheethairlineWidth borderBottomColor: '#eee' paddingVertical: 20 paddingHorizontal: 15 onPress= thispropsnavigation > <Text style= fontSize: 14 >searchText!</Text> </RectButton> : null </SearchLayout> ; } let SearchStack = ; let MainStack = ; MainStack; const styles = StyleSheet;