making jump to button functional

App.js

@@ -8,6 +8,7 @@ import {DateSeparator} from './src/components/DateSeparator';
 import {MessageSlack} from './src/components/MessageSlack';
 import {InputBox} from './src/components/InputBox';
 import streamChatTheme from './src/stream-chat-theme.js';
+import {Searchboxview} from './src/components/Searchboxview'
 
 import {StreamChat} from 'stream-chat';
 import {
@@ -16,6 +17,7 @@ import {
   MessageInput,
   Channel,
 } from 'stream-chat-react-native';
+import { TextInput } from 'react-native-gesture-handler';
 
 const chatClient = new StreamChat('q95x9hkbyd6p');
 const userToken =
@@ -74,6 +76,14 @@ function ChannelScreen({navigation, route}) {
 
 const ChannelListDrawer = props => {
   return (
+    <>
+    <TextInput
+            style={styles.inputSearchBox}
+            placeholderTextColor="grey"
+            onFocus={() => props.navigation.navigate('searchScreen',{client : chatClient})}
+            placeholder="Jump to"
+            blurOnSubmit={true}
+      />
     <ChannelList
       client={chatClient}
       changeChannel={channelId => {
@@ -82,6 +92,7 @@ const ChannelListDrawer = props => {
         });
       }}
     />
+    </>
   );
 };
 const Drawer = createDrawerNavigator();
@@ -91,16 +102,23 @@ export default function App() {
     <NavigationContainer>
       <View style={styles.container}>
         <Drawer.Navigator
+          drawerType={"front"}
           drawerContent={ChannelListDrawer}
           drawerStyle={styles.drawerNavigator}>
           <Drawer.Screen name="ChannelScreen" component={ChannelScreen} />
+          <Drawer.Screen name="searchScreen" component={Searchboxview}/>
         </Drawer.Navigator>
       </View>
     </NavigationContainer>
   );
 }
 
 const styles = StyleSheet.create({
+  inputSearchBox: {
+    color: "white",
+    backgroundColor: '#2e0a2f',
+    padding: 10,
+  },
   channelScreenSaveAreaView: {
     backgroundColor: 'white',
   },

package.json

@@ -14,6 +14,7 @@
     "@react-native-community/netinfo": "^5.6.2",
     "@react-navigation/drawer": "^5.3.2",
     "@react-navigation/native": "^5.1.1",
+    "@react-navigation/stack": "^5.4.1",
     "@stream-io/react-native-simple-markdown": "^",
     "moment": "^2.24.0",
     "react": "16.9.0",

src/components/ChannelHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TouchableOpacity, View, Text, Image, StyleSheet} from 'react-native';
+import {TouchableOpacity, View, Text, Image, StyleSheet, Platform} from 'react-native';
 import iconSearch from '../images/icon-search.png';
 import iconThreeDots from '../images/icon-3-dots.png';
 
@@ -64,6 +64,7 @@ export const styles = StyleSheet.create({
   channelTitle: {
     color: 'black',
     marginLeft: 10,
+    marginTop: Platform.OS == 'ios'? 0 :10 ,
     fontWeight: '900',
     fontSize: 17,
     fontFamily: 'Lato-Regular',

src/components/ChannelList.js

@@ -41,13 +41,6 @@ export const ChannelList = ({client, changeChannel}) => {
   return (
     <SafeAreaView>
       <View style={styles.container}>
-        <View style={styles.headerContainer}>
-          <TextInput
-            style={styles.inputSearchBox}
-            placeholderTextColor="grey"
-            placeholder="Jump to"
-          />
-        </View>
 
         <SectionList
           style={styles.sectionList}
@@ -249,6 +242,7 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   inputSearchBox: {
+    color: "white",
     backgroundColor: '#2e0a2f',
     padding: 10,
   },

src/components/Searchboxview.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import {View, Text, StyleSheet, FlatList} from 'react-native'
+import { TextInput } from 'react-native-gesture-handler';
+
+export const Searchboxview = ({navigation, route}) => {
+
+        const [channel_name, setChannels] = React.useState([]);
+        const [showChannel_name, setShowChannels] = React.useState([]);
+        const filters = {
+            type: 'messaging',
+            example: 'slack-demo',
+            members: {
+              $in: [route.params.client.user.id],
+            }
+        }
+        let offset = 0;
+        const options = {limit: 30, state: true};
+        async function fetchChannels() {
+            const channels = await route.params.client.queryChannels(filters);
+            const channels_names = [];
+            channels.map((c,i)=> {
+                const obj = {
+                    key : i,
+                    name : c.data.name,
+                    channelId : c.id,
+                }                
+                channels_names.push(obj)
+            })
+            setChannels(channels_names);
+        }
+        function searchFunction(u){
+            fetchChannels();
+            const showchannel = [];
+            channel_name.map((c)=> {
+                if(c.name!= undefined && c.name.toLowerCase().indexOf(u) > -1)
+                {
+                    showchannel.push({
+                        key : c.key,
+                        name : c.name,
+                        channelId : c.channelId,
+                    })
+                }
+            })
+            setShowChannels(showchannel)
+
+        }
+        function changeChannel(channelId) {
+            navigation.jumpTo('ChannelScreen',{channelId,});
+        }
+
+        return(
+            <>
+            <View style={{flexDirection:"row",backgroundColor:"#3F0E40"}}>
+                <Text style={styles.backButton} onPress={() => {navigation.goBack(); navigation.openDrawer()}}>{" <"}</Text>
+                <TextInput
+                    autoFocus={true}
+                    style={styles.inputSearchBox}
+                    placeholderTextColor="grey"
+                    placeholder="Jump to"
+                    blurOnSubmit={true}
+                    onChangeText= {searchFunction}
+                />
+            </View>
+            <View style={{backgroundColor: "#3F0E40",height:"100%",width:"100%"}}>
+                <FlatList
+                    style={{margin:20}}
+                    data={showChannel_name}
+                    renderItem= {({item, index, separator}) => (
+                        <Text onPress={() => changeChannel(item.channelId)} key={item.key} style={{color: "white",fontSize:20,margin:10}}>{item.name}</Text>
+                    )}
+                />
+
+            </View>
+            </>
+        )
+    }
+const styles = StyleSheet.create({
+    inputSearchBox: {
+        flex:9,
+        height:40,
+        borderRadius:20,
+        color: "white",
+        backgroundColor: '#2e0a2f',
+        margin: 10,
+      },
+      backButton: {
+          flex:1,
+          fontSize:30,
+          marginTop:10,
+          borderRadius:50,
+          backgroundColor:'#2e0a2f',
+          height:40,
+          marginLeft:5,
+          paddingLeft:5,
+          color:"white"
+        },   
+})

yarn.lock

@@ -1114,6 +1114,13 @@
   integrity sha512-/gxmh66d7aUdjiGBf7IL7E2UXxzq5uzjkS+LtxDsLhVWwhdrT2vHVICZSE01ImOl+7K8ZpdfmTzLmX8JbTgtLA==
   dependencies:
     nanoid "^3.0.2"
+"@react-navigation/stack@^5.4.1":
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.4.1.tgz#3b4ebec52649dca77571050bb00db9ea02df61a8"
+  integrity sha512-Pi1OH1kofbYIpUJ6q+8NZ+wprrGcBmTLAE/DfgmzrC+6I+EObYq55N2ByikqVSgKaRS+TsDrQe/RNkumsOjqVA==
+  dependencies:
+    color "^3.1.2"
+    react-native-iphone-x-helper "^1.2.1"
 
 "@sinonjs/commons@^1.7.0":
   version "1.7.1"