Coder Social home page Coder Social logo

web-server-example's Issues

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:-
Screen Shot 2020-01-08 at 3 37 42 PM

Expected Behaviour:-
Screen Shot 2020-01-08 at 3 37 04 PM

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>
        )
    };  
};

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.

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.