├── .gitignore ├── .watchmanconfig ├── App ├── components │ └── List.js ├── index.js └── screens │ ├── Details.js │ ├── Initializing.js │ └── List.js ├── README.md ├── app.json ├── assets ├── icon.png └── splash.png ├── babel.config.js ├── package.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p12 6 | *.key 7 | *.mobileprovision 8 | *.orig.* 9 | web-build/ 10 | web-report/ 11 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App/components/List.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Text, 4 | StyleSheet, 5 | FlatList, 6 | TouchableOpacity, 7 | View 8 | } from "react-native"; 9 | import { Ionicons } from "@expo/vector-icons"; 10 | 11 | const styles = StyleSheet.create({ 12 | row: { 13 | paddingHorizontal: 16, 14 | paddingVertical: 20, 15 | backgroundColor: "#fff", 16 | flexDirection: "row", 17 | justifyContent: "space-between", 18 | alignItems: "center" 19 | }, 20 | rowOdd: { 21 | backgroundColor: "#FBFBFB" 22 | }, 23 | rowText: { 24 | color: "#4A4A4A", 25 | fontSize: 18, 26 | fontWeight: "500" 27 | }, 28 | sep: { 29 | height: 1, 30 | backgroundColor: "#E4E4E4", 31 | flex: 1 32 | } 33 | }); 34 | 35 | export const ListItem = ({ title, onPress, isOdd }) => ( 36 | 40 | {title} 41 | 42 | 43 | ); 44 | 45 | export const List = props => ( 46 | } 49 | /> 50 | ); 51 | -------------------------------------------------------------------------------- /App/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | createAppContainer, 3 | createStackNavigator, 4 | createSwitchNavigator 5 | } from "react-navigation"; 6 | 7 | import Initializing from "./screens/Initializing"; 8 | import List from "./screens/List"; 9 | import Details from "./screens/Details"; 10 | 11 | const MainApp = createStackNavigator({ 12 | List: { 13 | screen: List, 14 | navigationOptions: { 15 | headerTitle: "People" 16 | } 17 | }, 18 | Details: { 19 | screen: Details, 20 | navigationOptions: { 21 | headerTitle: "Details" 22 | } 23 | } 24 | }); 25 | 26 | const App = createSwitchNavigator({ 27 | Initializing, 28 | MainApp 29 | }); 30 | 31 | export default createAppContainer(App); 32 | -------------------------------------------------------------------------------- /App/screens/Details.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text, StyleSheet, ScrollView, SafeAreaView } from "react-native"; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | backgroundColor: "#F5F5F5" 8 | }, 9 | section: { 10 | backgroundColor: "#fff", 11 | borderTopWidth: 1, 12 | borderTopColor: "#E4E4E4", 13 | borderBottomWidth: 1, 14 | borderBottomColor: "#E4E4E4", 15 | padding: 14 16 | }, 17 | titleText: { 18 | fontWeight: "600", 19 | fontSize: 18, 20 | color: "#4A4A4A", 21 | marginTop: 20, 22 | marginBottom: 10, 23 | paddingHorizontal: 14 24 | }, 25 | text: { 26 | fontSize: 16, 27 | color: "#4A4A4A", 28 | marginBottom: 20 29 | } 30 | }); 31 | 32 | class DetailsScreen extends React.Component { 33 | state = { 34 | data: [] 35 | }; 36 | 37 | componentDidMount() { 38 | const item = this.props.navigation.getParam("item", {}); 39 | const data = []; 40 | 41 | Object.keys(item).forEach(key => { 42 | data.push({ key, value: `${item[key]}` }); 43 | }); 44 | 45 | this.setState({ data }); 46 | } 47 | 48 | render() { 49 | return ( 50 | 51 | 52 | Info 53 | 54 | 55 | {this.state.data.map(data => ( 56 | {`${data.key}: ${ 57 | data.value 58 | }`} 59 | ))} 60 | 61 | 62 | 63 | ); 64 | } 65 | } 66 | 67 | export default DetailsScreen; 68 | -------------------------------------------------------------------------------- /App/screens/Initializing.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Initializing extends React.Component { 4 | componentDidMount() { 5 | this.props.navigation.navigate("MainApp"); 6 | } 7 | 8 | render() { 9 | return null; 10 | } 11 | } 12 | 13 | export default Initializing; 14 | -------------------------------------------------------------------------------- /App/screens/List.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ActivityIndicator } from "react-native"; 3 | 4 | import { List, ListItem } from "../components/List"; 5 | 6 | class ListScreen extends React.Component { 7 | state = { 8 | loading: true, 9 | list: [] 10 | }; 11 | 12 | componentDidMount() { 13 | fetch("https://swapi.co/api/people") 14 | .then(res => res.json()) 15 | .then(res => { 16 | this.setState({ 17 | loading: false, 18 | list: res.results 19 | }); 20 | }); 21 | } 22 | 23 | render() { 24 | if (this.state.loading) { 25 | return ; 26 | } 27 | 28 | return ( 29 | item.url} 32 | renderItem={({ item, index }) => ( 33 | this.props.navigation.navigate("Details", { item })} 37 | /> 38 | )} 39 | /> 40 | ); 41 | } 42 | } 43 | 44 | export default ListScreen; 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A demo app for a [React Native School lesson](https://www.reactnativeschool.com/handling-deep-links-with-react-navigation/). 2 | 3 | ## Installation 4 | 5 | ```bash 6 | git clone https://github.com/ReactNativeSchool/react-navigation-deep-linking.git 7 | cd react-navigation-deep-linking 8 | yarn install 9 | ``` 10 | 11 | ## Running 12 | 13 | ``` 14 | yarn run ios 15 | yarn run android 16 | ``` 17 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Deep Linking Demo", 4 | "slug": "DeepLinking", 5 | "privacy": "public", 6 | "sdkVersion": "33.0.0", 7 | "platforms": ["ios", "android", "web"], 8 | "version": "1.0.0", 9 | "orientation": "portrait", 10 | "icon": "./assets/icon.png", 11 | "splash": { 12 | "image": "./assets/splash.png", 13 | "resizeMode": "contain", 14 | "backgroundColor": "#ffffff" 15 | }, 16 | "updates": { 17 | "fallbackToCacheTimeout": 0 18 | }, 19 | "assetBundlePatterns": ["**/*"], 20 | "ios": { 21 | "supportsTablet": true 22 | }, 23 | "scheme": "swapi" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ReactNativeSchool/react-navigation-deep-linking/5044808e74e871a6e077e4e513942ac99d525f11/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ReactNativeSchool/react-navigation-deep-linking/5044808e74e871a6e077e4e513942ac99d525f11/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "expo": "^33.0.0", 12 | "react": "16.8.3", 13 | "react-dom": "^16.8.6", 14 | "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz", 15 | "react-native-web": "^0.11.4", 16 | "react-navigation": "^3.11.0" 17 | }, 18 | "devDependencies": { 19 | "babel-preset-expo": "^5.1.1" 20 | }, 21 | "private": true 22 | } 23 | --------------------------------------------------------------------------------