Skip to content

Commit

Permalink
add react native project code
Browse files Browse the repository at this point in the history
  • Loading branch information
hsavit1 authored and kettanaito committed Oct 22, 2020
1 parent 0d2f306 commit 680768c
Show file tree
Hide file tree
Showing 66 changed files with 14,740 additions and 3,480 deletions.
6 changes: 6 additions & 0 deletions examples/graphql-react-native-apollo/.buckconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

[android]
target = Google Inc.:Google APIs:23

[maven_repositories]
central = https://repo1.maven.org/maven2
4 changes: 4 additions & 0 deletions examples/graphql-react-native-apollo/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
root: true,
extends: '@react-native-community',
};
1 change: 1 addition & 0 deletions examples/graphql-react-native-apollo/.gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.pbxproj -text
59 changes: 59 additions & 0 deletions examples/graphql-react-native-apollo/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# OSX
#
.DS_Store

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate

# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml

# node.js
#
node_modules/
npm-debug.log
yarn-error.log

# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore

# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/

*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots

# Bundle artifact
*.jsbundle

# CocoaPods
/ios/Pods/
95 changes: 95 additions & 0 deletions examples/graphql-react-native-apollo/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React from 'react'
import {
SafeAreaView,
StyleSheet,
View,
Text,
StatusBar,
FlatList,
ActivityIndicator,
} from 'react-native'
import { Header } from 'react-native/Libraries/NewAppScreen'
import { ApolloProvider, gql, useQuery } from '@apollo/client'
import client from './client'

const GET_CHARACTERS = gql`
query GetCharacters {
characters {
results {
id
name
}
}
}
`

export const App = () => (
<ApolloProvider client={client}>
<MyRootComponent />
</ApolloProvider>
)

const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
)

export const MyRootComponent = () => {
const { data, loading, error } = useQuery(GET_CHARACTERS)

const DATA = data?.characters?.results

const renderItem = ({ item }) => {
return <Item title={item.name} />
}

return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView style={styles.container}>
<Text style={styles.sectionTitle}>Rick and morty MSW demo</Text>

<Header />

{loading && <ActivityIndicator testID="loading" />}

{error && <Text testID="error">{`${error}`}</Text>}

{!loading && !error && DATA?.length > 0 && (
<FlatList
testID="list"
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
)}
</SafeAreaView>
</>
)
}

const styles = StyleSheet.create({
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: 'black',
marginBottom: 40,
},
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
backgroundColor: 'white',
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
})

export default App
55 changes: 55 additions & 0 deletions examples/graphql-react-native-apollo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# React Native (GraphQL)

This repository illustrates how to use [Mock Service Worker](https://github.com/mswjs/msw) to mock a GraphQL server for development and testing in a React Native project.

## Technologies

- [**React Native**](https://reactnative.dev)
- [React Testing Library](https://github.com/testing-library/react-testing-library) for testing assertions;

## Getting started

```bash
$ git clone https://github.com/mswjs/examples.git
$ cd examples
$ yarn
$ cd graphql-react-native-apollo
```

## Running locally

```bash
$ yarn start
```

### Android

```bash
$ yarn android
```

### iOS

```bash
$ yarn ios
```

## Tests

```bash
$ yarn test
```

## Key points

- [`mocks/handlers.js`](mocks/handlers.js) describes request handlers to use.

### React Native

- [`mocks/native.js`](mocks/native.js) enables request interception in React Native runtime;
- [`index.js`](index.js) conditionally enables mocking in `development` environment.

### NodeJS

- [`mocks/server.js`](mocks/server.js) enables requests interceptions in NodeJS (i.e. for tests with jest);
- [`jest.setup.js`](jest.setup.js) configures test runner to use API mocking in tests.
55 changes: 55 additions & 0 deletions examples/graphql-react-native-apollo/android/app/BUCK
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# To learn about Buck see [Docs](https://buckbuild.com/).
# To run your application with Buck:
# - install Buck
# - `npm start` - to start the packager
# - `cd android`
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
# - `buck install -r android/app` - compile, install and run application
#

load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")

lib_deps = []

create_aar_targets(glob(["libs/*.aar"]))

create_jar_targets(glob(["libs/*.jar"]))

android_library(
name = "all-libs",
exported_deps = lib_deps,
)

android_library(
name = "app-code",
srcs = glob([
"src/main/java/**/*.java",
]),
deps = [
":all-libs",
":build_config",
":res",
],
)

android_build_config(
name = "build_config",
package = "com.mswdemo",
)

android_resource(
name = "res",
package = "com.mswdemo",
res = "src/main/res",
)

android_binary(
name = "app",
keystore = "//android/keystores:debug",
manifest = "src/main/AndroidManifest.xml",
package_type = "debug",
deps = [
":app-code",
],
)
Loading

0 comments on commit 680768c

Please sign in to comment.