react-navigation / web-server-example

Example for react-navigation and server-side rendering

React Navigation 7

Routing and navigation for your React Native apps.

Documentation can be found at reactnavigation.org.

This branch contains the code for the pre-release version of React Navigation 7. You can find the code for the latest stable version in the 6.x branch.

Package Versions

Name	Latest Version
@react-navigation/bottom-tabs
@react-navigation/core
@react-navigation/devtools
@react-navigation/drawer
@react-navigation/elements
@react-navigation/material-top-tabs
@react-navigation/native-stack
@react-navigation/native
@react-navigation/routers
@react-navigation/stack
react-native-tab-view

Contributing

Please read through our contribution guide to get started!

Installing from a fork on GitHub

Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use gitpkg.

First install gitpkg:

yarn global add gitpkg

Then follow these steps to publish and install a forked package:

1. Fork this repo to your account and clone the forked repo to your local machine
2. Open a Terminal and cd to the location of the cloned repo
3. Run yarn to install any dependencies
4. If you want to make any changes, make them and commit
5. Run yarn lerna run prepack to perform the build steps
6. Now cd to the package directory that you want to use (e.g. cd packages/stack for @react-navigation/stack)
7. Run gitpkg publish to publish the package to your repo

After publishing, you should see something like this:

Package uploaded to [email protected]:<user>/<repo>.git with the name <name>

You can now install the dependency in your project:

yarn add <user>/<repo>.git#<name>

Remember to replace <user>, <repo> and <name> with right values.

web-server-example's Issues

Project does not run

I've checked out the project, done an npm install, then npm start, and I get the following output

> [email protected] start /Users/jacquesdevilliers/dev/web-server-example
> razzle start

 WAIT  Compiling...


✔ success client compiled in 3s 279ms

Compiling

● client

● server █████████████████████████ compiling (0%)  
 

✖ ｢wdm｣: Hash: fd3adfab81130db9c776
Version: webpack 4.39.3
Time: 3290ms
Built at: 09/12/2019 4:50:35 PM
                  Asset      Size  Chunks             Chunk Names
    static/js/bundle.js  2.08 MiB  client  [emitted]  client
static/js/bundle.js.map  2.16 MiB  client  [emitted]  client
Entrypoint client = static/js/bundle.js static/js/bundle.js.map
[0] multi ./node_modules/razzle/config/polyfills.js ./node_modules/razzle-dev-utils/webpackHotDevClient.js ./src/client 52 bytes {client} [built]
[./node_modules/@react-navigation/web/dist/index.js] 803 bytes {client} [built]
[./node_modules/object-assign/index.js] 2.06 KiB {client} [built]
[./node_modules/process/browser.js] 5.29 KiB {client} [built]
[./node_modules/promise/lib/es6-extensions.js] 2.6 KiB {client} [built]
[./node_modules/promise/lib/rejection-tracking.js] 2.81 KiB {client} [built]
[./node_modules/razzle-dev-utils/node_modules/react-dev-utils/formatWebpackMessages.js] 4.27 KiB {client} [built]
[./node_modules/razzle-dev-utils/node_modules/react-dev-utils/launchEditorEndpoint.js] 330 bytes {client} [built]
[./node_modules/razzle-dev-utils/node_modules/react-error-overlay/lib/index.js] 341 KiB {client} [built]
[./node_modules/razzle-dev-utils/webpackHotDevClient.js] 7.56 KiB {client} [built]
[./node_modules/razzle/config/polyfills.js] 1.06 KiB {client} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {client} [built]
[./node_modules/react/index.js] 190 bytes {client} [built]
[./node_modules/sockjs-client/lib/entry.js] 244 bytes {client} [built]
[./src/client.js] 464 bytes {client} [built]
    + 277 hidden modules

WARNING in ./src/SidebarView.js
Module Warning (from ./node_modules/eslint-loader/index.js):

  Line 1:  'Component' is defined but never used  no-unused-vars


 @ ./src/App.js 11:0-40 13:27-38
 @ ./src/client.js
 @ multi ./node_modules/razzle/config/polyfills.js ./node_modules/razzle-dev-utils/webpackHotDevClient.js ./src/client

WARNING in ./src/screens/Contributor.js
Module Warning (from ./node_modules/eslint-loader/index.js):

  Line 2:  'Link' is defined but never used  no-unused-vars


 @ ./src/App.js 8:0-48 32:15-26
 @ ./src/client.js
 @ multi ./node_modules/razzle/config/polyfills.js ./node_modules/razzle-dev-utils/webpackHotDevClient.js ./src/client
✔ success server compiled in 539ms
Cannot find module 'react-navigation'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/jacquesdevilliers/dev/web-server-example/node_modules/react-navigation-hooks/dist/commonjs/Hooks.ts:9:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

Make the example even more real-world

Make this codebase a bit larger, demonstrate other navigation actions, and maybe build a basic custom navigator with a fade animation.

Cool!

CSS, beautify this example

I've left this in a super ugly state. Could somebody help style this thing?

Please avoid react-native-web and react-native-dom for this example, because I want to make sure react-nav is friendly to a CSS-loving audience.

Icons doesnt appear using headerRight after react-navigation update ^3.0.0-rc.5

'headerRight' icon doesn't appear when headerBackButton shows. Happening after updated react-navigation to version ^3.0.0-rc.5.

Any help would be appreciated!!

software | version
react-navigation | 4.0.10
react-native | ^0.61.5
expo | 35
npm or yarn | npm

Current Behaviour:-

Expected Behaviour:-

static navigationOptions = ({ navigation }) => {
const activityId = navigation.state.params.activity.id;
let activity = Activities.getActivityById(activityId);
const client = navigation.state.params.client;
let responsiblePerson = getUserToNotify(client);
let responsibleContactNumber = getResponsibleContactNumber(responsiblePerson);

    if (responsibleContactNumber != null) {
        var number = responsibleContactNumber.number;
        if (responsibleContactNumber.countryCode == "33") {
            if ( (number.charAt(0)) != 0 ) {
                number = "0" + number;
            }
        }
    }
    return {
        headerTitle: null,
        headerStyle: { backgroundColor: '#fff' },
        headerTintStyle: Styles.colorPrimary,
        headerRight: () => (
            <View style={{flexDirection: 'row'}}>
                {client.cellNumber || client.homeNumber ?
                <TouchableOpacity 
                onPress={() => responsibleContactNumber == null ? null : Communications.phonecall(number, true)} 
                style={{flex: 1, paddingTop: 10, paddingBottom: 10, paddingLeft: 10}}>
                    <FontAwesome 
                        name='phone' 
                        style={{paddingHorizontal: 10, color: Styles.colorPrimary}}
                        size={23} 
                    />
                </TouchableOpacity>
                : null }
                {client ?
                <TouchableOpacity 
                onPress={() => navigation.navigate('ClientTabs', {data: client, deleteAvailable: false})}
                style={{flex: 1, paddingTop: 10, paddingBottom: 10, paddingLeft: 10}}>
                    <FontAwesome 
                        name='user' 
                        style={{paddingHorizontal: 10, color: Styles.colorPrimary}}
                        size={23} 
                    />
                </TouchableOpacity>
                : null }
                { activity.isDeclined != true ?
                <TouchableOpacity 
                onPress={() => navigation.navigate('AppointmentEditor', { activityId: activityId, onGoBack: navigation.state.params.onGoBack })} 
                style={{flex: 1, paddingTop: 10, paddingBottom: 10, paddingLeft: 10}}>
                    <FontAwesome 
                        name='pencil-square-o' 
                        style={{paddingHorizontal: 10, color: Styles.colorPrimary}}
                        size={23} 
                    />
                </TouchableOpacity>
                : null }
            </View>
        )
    };  
};