Navbar and JSX

[nicolaselmir]

Hey Guys, I cant find a way to use this with JSX. What to do ?

static route = {
    navigationBar: {
      title: 'Home',
    }
  }

[annelorraineuy]

What do you mean? What error do you get? I was able to implement this fine on my ES6 class components.

[annelorraineuy]

@nicolaselmir Here's an example using a component as title:

class Home extends Component {
    static route = {
        navigationBar: {
            tintColor: Colors.orange,
            backgroundColor: Colors.white,
            borderBottomColor: Colors.orange,
            borderBottomWidth: 5,
            elevation: 0,
            visible: true,
            renderTitle: (route, props) => <Logo visible={true} />
        }
    };

    componentWillMount() {
        ...
    }

    render() {
        return (
            <View style={styles.container}>
                ...
            </View>
        );
    }
}

[mauriciord]

@annelorraineuy I write like your Example, but my Logo is on left size. Why not in the middle ?

[annelorraineuy]

@mauriciord you have to add the style to center the custom component.

import React from 'react'
import { View, Image } from 'react-native'

export function Logo({ visible })
{
    const { logo, viewStyle } = styles;

    if (visible)
    {
        return (
            <View
                style={viewStyle}
            >
                <Image
                    source={require('./path-to-image-here')}
                    style={logo}
                />
            </View>
        );
    }
};

const styles = {
    viewStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        flexGrow: 1
    },
    logo: {
       // height: 20,
        // width: 136.5,
        justifyContent: 'center',
        alignItems: 'center',
        resizeMode: 'cover'
    }
};

[mauriciord]

Not yet, same thing @annelorraineuy

import React from 'react';
import {
  StyleSheet,
  Image,
  View
} from 'react-native';

export const Logo = (props) => {
  return (
    <View style={styles.container}>
      <Image
        source={require('../../assets/images/logo-full.png')}
        style={styles.logoStyle}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  containerStyle: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoStyle: {
    width: 148,
    height: 50,
    resizeMode: 'contain',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

It continues on the left of navbar, at iOS

= = = = = = = = = = = = = = = = UPDATE: Now the correct code:

import React from 'react';
import {
  StyleSheet,
  Image,
  View
} from 'react-native';

export const Logo = (props) => {
  return (
    <View style={styles.container}>
      <Image
        source={require('../../assets/images/logo-full.png')}
        style={styles.logoStyle}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoStyle: {
    width: 148,
    height: 50,
    resizeMode: 'contain',
    alignSelf: 'center'
  }
});