Example for react-navigation and server-side rendering
Demonstrating use of React Navigation v3 on the client and server, and React Hooks
yarn
yarn start
Server will open on http://localhost:3000
Make this codebase a bit larger, demonstrate other navigation actions, and maybe build a basic custom navigator with a fade animation.
'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>
)
};
};
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.
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)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.