Merge pull request #90 from GetStream/vishal/examples

Updating example apps

Author: vishalnarkhede

README.md

@@ -9,14 +9,14 @@
 
 **Quick Links**
 
-* [Stream Chat API](https://getstream.io/chat/) product overview
-* [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat
-* [React Native Chat Tutorial](https://getstream.io/chat/react-native-chat/tutorial/)
-* [Chat UI Kit](https://getstream.io/chat/ui-kit/)
+- [Stream Chat API](https://getstream.io/chat/) product overview
+- [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat
+- [React Native Chat Tutorial](https://getstream.io/chat/react-native-chat/tutorial/)
+- [Chat UI Kit](https://getstream.io/chat/ui-kit/)
 
 ## React Chat Tutorial
 
-The best place to start is the [React Native Chat Tutorial](https://getstream.io/chat/react-native-chat/tutorial/). It teaches you how to use this SDK and also shows how to make common changes. 
+The best place to start is the [React Native Chat Tutorial](https://getstream.io/chat/react-native-chat/tutorial/). It teaches you how to use this SDK and also shows how to make common changes.
 
 ## Example Apps
 
@@ -28,10 +28,8 @@ This repo includes 2 example apps. One that's used with Expo, and one for native
 2. ```bash
    yarn global add expo-cli
    git clone https://github.com/GetStream/stream-chat-react-native.git
-   cd stream-chat-react-native
-   make
-   cd examples/one
-   yarn start
+   cd stream-chat-react-native/examples/ExpoMessaging
+   yarn && yarn start
    ```
 
 ### Native example
@@ -42,9 +40,8 @@ This repo includes 2 example apps. One that's used with Expo, and one for native
 
 4. ```bash
    git clone https://github.com/GetStream/stream-chat-react-native.git
-   cd stream-chat-react-native
-   make
-   cd examples/two
+   cd stream-chat-react-native/examples/NativeMessaging
+   yarn install
    ```
 5. - For iOS
      ```bash
@@ -57,7 +54,7 @@ This repo includes 2 example apps. One that's used with Expo, and one for native
 
 ## Docs
 
-The [styleguidist docs for stream-chat-react-native](https://getstream.github.io/stream-chat-react-native/) document how all the components work. 
+The [styleguidist docs for stream-chat-react-native](https://getstream.github.io/stream-chat-react-native/) document how all the components work.
 
 The React Native components are created using the stream-chat-js library. If you're customizing the components it's important to learn how the Chat Server API works. You'll want to review our [JS chat API docs](https://getstream.io/chat/docs/js/).
 
@@ -227,8 +224,6 @@ In current context, dependencies such as `react-native-document-picker` and (if
 
 ## Common issues
 
-
-
 #### While running native example, you may (not necessarily) run into following issues:
 
 1. When you execute `react-native run-ios` for the first time, it starts a metro bundler in parallel. It can result into some errors, since build process isn't complete yet. Try the following to fix this:

examples/ExpoMessaging/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

examples/one/.gitignore renamed to examples/ExpoMessaging/.gitignore

@@ -2,6 +2,13 @@ node_modules/**/*
 .expo/*
 npm-debug.*
 *.jks
+*.p8
 *.p12
 *.key
 *.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store

examples/one/App.js renamed to examples/ExpoMessaging/App.js

@@ -8,33 +8,22 @@ import {
   MessageInput,
   ChannelList,
   Thread,
-  ChannelPreviewMessenger,
   CloseButton,
-  TypingIndicator,
+  ChannelPreviewMessenger,
 } from 'stream-chat-expo';
 
 import { createAppContainer, createStackNavigator } from 'react-navigation';
 
-import { YellowBox } from 'react-native';
-
-YellowBox.ignoreWarnings(['Remote debugger']);
-
-const server = {
-  // API_KEY: 'qk4nn7rpcn75',
-  // TOKEN:
-  //   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoidGhpZXJyeSJ9.EJ6poZ2UbnJJvbCi6ZiImeEPeIoXVEBSdZN_-2YC3t0',
-  // USER: 'thierry',
-  // SERVER_ENDPOINT: 'http://localhost:3030',
-};
-
-const apiKey = server.API_KEY || 'qk4nn7rpcn75';
+const chatClient = new StreamChat('qk4nn7rpcn75');
 const userToken =
-  server.TOKEN ||
   'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiYmlsbG93aW5nLWZpcmVmbHktOCJ9.CQTVyJ6INIM8u28BxkneY2gdYpamjLzSVUOTZKzfQlg';
-const user = server.USER || 'billowing-firefly-8';
-
-const chatClient = new StreamChat(apiKey);
-
+const user = {
+  id: 'billowing-firefly-8',
+  name: 'Billowing firefly',
+  image:
+    'https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg',
+};
+// Read more about style customizations at - https://getstream.io/chat/react-native-chat/tutorial/#custom-styles
 const theme = {
   avatar: {
     image: {
@@ -51,30 +40,15 @@ const theme = {
     `,
   },
 };
-
-if (server.SERVER_ENDPOINT) {
-  chatClient.setBaseURL(server.SERVER_ENDPOINT);
-}
-
-chatClient.setUser(
-  {
-    id: user,
-  },
-  userToken,
-);
+  
 
 const filters = { type: 'messaging' };
-const sort = {
-  last_message_at: -1,
-  cid: 1,
-};
+const sort = { last_message_at: -1 };
 const options = {
-  member: true,
+  state: true,
   watch: true,
+  limit: 30,
 };
-// const channels = chatClient.queryChannels(filters, sort, {
-//   watch: true,
-// });
 
 class ChannelListScreen extends PureComponent {
   static navigationOptions = () => ({
@@ -84,13 +58,13 @@ class ChannelListScreen extends PureComponent {
   render() {
     return (
       <SafeAreaView>
-        <Chat style={theme} client={chatClient}>
+        <Chat client={chatClient} style={theme}>
           <View style={{ display: 'flex', height: '100%', padding: 10 }}>
             <ChannelList
-              Preview={ChannelPreviewMessenger}
               filters={filters}
               sort={sort}
               options={options}
+              Preview={ChannelPreviewMessenger}
               onSelect={(channel) => {
                 this.props.navigation.navigate('Channel', {
                   channel,
@@ -120,11 +94,10 @@ class ChannelScreen extends PureComponent {
 
     return (
       <SafeAreaView>
-        <Chat style={theme} client={chatClient}>
+        <Chat client={chatClient} style={theme}>
           <Channel client={chatClient} channel={channel}>
             <View style={{ display: 'flex', height: '100%' }}>
               <MessageList
-                TypingIndicator={TypingIndicator}
                 onThreadSelect={(thread) => {
                   this.props.navigation.navigate('Thread', {
                     thread,
@@ -176,7 +149,7 @@ class ThreadScreen extends PureComponent {
 
     return (
       <SafeAreaView>
-        <Chat style={theme} client={chatClient}>
+        <Chat client={chatClient}>
           <Channel
             client={chatClient}
             channel={channel}
@@ -219,7 +192,27 @@ const RootStack = createStackNavigator(
 const AppContainer = createAppContainer(RootStack);
 
 export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      clientReady: false
+    }
+  }
+
+  async componentDidMount() {
+
+    await chatClient.setUser(
+      user,
+      userToken,
+    );
+
+    this.setState({
+      clientReady: true
+    })
+  }
   render() {
-    return <AppContainer />;
+    if (this.state.clientReady)
+      return <AppContainer />;
+    else return null;
   }
 }

examples/one/app.json renamed to examples/ExpoMessaging/app.json

@@ -1,10 +1,14 @@
 {
   "expo": {
-    "name": "Example one - stream chat react native",
-    "slug": "one",
+    "name": "ExpoMessaging",
+    "slug": "ExpoMessaging",
     "privacy": "public",
-    "sdkVersion": "32.0.0",
-    "platforms": ["ios", "android"],
+    "sdkVersion": "35.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -16,7 +20,9 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
     }

examples/ExpoMessaging/assets/icon.png

@@ -1,4 +1,3 @@
-/* eslint-env node */
 module.exports = function(api) {
   api.cache(true);
   return {

examples/one/assets/splash.png renamed to examples/ExpoMessaging/assets/splash.png

@@ -138,15 +138,13 @@ const FS = require('fs'),
 const repoDir = PATH.dirname(PATH.dirname(__dirname));
 
 const moduleBlacklist = [
-    new RegExp(repoDir + '/examples/one/.*'),
-    new RegExp(repoDir + '/expo-package/.*'),
-    new RegExp(repoDir + '/native-package/node_modules/.*'),
-    new RegExp(repoDir + '/node_modules/.*'),
-    /public.*/,
-    /node_modules[^/]+\/.*/,
-    /[^-]build\..*/,
-    /.*\.bak\/.*/,
-    /app\/pages\/browser\/.*/,
+  new RegExp(repoDir + '/projects/stream-chat-react-native/examples/two/.*'),
+  new RegExp(repoDir + '/projects/stream-chat-react-native/examples/one/.*'),
+  new RegExp(repoDir + '/projects/stream-chat-react-native/examples/three/.*'),
+  //   new RegExp(repoDir + '/native-example/(.*)'),
+  new RegExp(repoDir + '/projects/stream-chat-react-native/native-package/.*'),
+  new RegExp(repoDir + '/projects/stream-chat-react-native/expo-package/node_modules/.*'),
+  new RegExp(repoDir + '/projects/stream-chat-react-native/node_modules/.*'),
   ],
   baseModulePath = resolvePath(__dirname, 'node_modules'),
   // watch alternate roots (outside of project root)

examples/one/babel.config.js renamed to examples/ExpoMessaging/babel.config.js

@@ -0,0 +1,25 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^35.0.0",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.3.0",
+    "react-native-reanimated": "~1.2.0",
+    "react-native-web": "^0.11.7",
+    "react-navigation": "3.2.1",
+    "stream-chat-expo": "^0.3.9"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^7.1.0"
+  },
+  "private": true
+}