Develop Reference

Android and React Native top navigation Bar

I would like to ask you about section selected on pictures below.
What is the name of this section and how I can style it in React Native? At now my APK have an ugly white bar and I can't see level of battery or WiFi.

The area with the battery and time is called the status bar. In most cases I've seen, the status bar is given a set height depending on the platform from ReactNative's Platform module.
Afterwards, you can pass this height to a <View> and add additional styling.
import { Platform, ... } from 'react-native'
...code...
const STATUS_BAR_HEIGHT = Platform.select({ ios: 20, android: 24 })
export default class MyComponent extends Component {
...code...
render() {
<View style={{ height: STATUS_BAR_HEIGHT, ...more styles here... }} />
<View>
...code...
</View>
}
}

Styles are not being applied to children props

My container class:
import React from 'react';
import {View} from 'react-native';
const Cont = (props) => {
return(
<View style={styles.cStyle}>
{props.children}
</View>
);
};
const styles = {
cStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#fff',
borderBottomWidth: 0,
elevation: 10,
marginLeft: 5,
marginRight: 5,
marginTop: 10
}
};
export default Cont;
Now the class that uses this component:
import React from 'react';
import {Text} from 'react-native';
import Cont from './Cont';
const Det = (props) => {
return(
<Cont>
<Text>{props.alb.title}</Text>
</Cont>
);
};
export default Det;
I don't think I need to provide the index.js, since all I'm doing related to the subject in matter is calling a self closing tag of the object. I have no idea why my styles are not being applied. I checked everything I thought I could of have checked. Any ideas? Any support is appreciated.
PS: I was expecting <Text /> childs to inherit my styles
PS2: Also I'm not sure this is really 'inheritance'. Because actually the styles should affect every <View> from my class and then consequently the children that is INSIDE my <View> tags

I'd like to answer my own question regarding this issue because there might be other persons struggling now or in the future, and would not know quite what to do, hopefully this answer will help them.
There was no error in my code, at least not in the classes I posted above. And EVERY <Text> children should be inside a styled <View>, which was my intention at first. So I had made a typo when calling the class in the entry js file. But, somehow (yes this defies my current React Native knowledge which is already little) the app was still compiling but not styling ANYTHING. Only after I restarted not only the server in the terminal but also the simulator, is that I received the bug which I could finnally debug. (Unexpected char 'blabla' in Line X). After fixing it my styles were applied. But the craziest thing is: It was either compiling with an unexpected character (which seems impossible to me) or compiling a past version of my App. Now, this sounds absolutely crazy to me and I will be reporting it on React Native forums and Android Studio. Thanks for all the help.
EDIT: React Native forums topic on the issue: http://discuss.nativebase.io/t/android-simulator-compiling-wrong-code/1183

Regular styles behave differently in react-native compared to CSS in say, the web-browser. There's no concept of style inheritance by default in react-native, so styling that you apply to <Cont /> won't be inherited by the children of <Cont /> (ie your <Text> elements).
When styling with react, you'll typically need to apply styles directly to all components that you want to tweak the appearance of:
<Cont>
{ /* custom styling must be applied to all components that you
want to tweak */ }
<Text style={{ color : 'red' }}>{props.alb.title}</Text>
</Cont>
Something to also keep in mind is that different element types (<Text/> , <View />, etc) sometimes only support a limited subset of styling options. For example, see the styling documentation for <Text /> for an overview of the styling options that the <Text /> element type supports.

Avoid status bar overlap on all screens

I want all screens on my app to appear below the status bar on both iOS and Android, so I'd either have to add a StatusBar component or a paddingTop to all my screens.
Is there a way to do this globally? Where is the appropriate top level component to add the StatusBar in a Redux app? (e.g. which part of https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)?

Step 1: Import Platform and StatusBar
import { Platform, StatusBar} from 'react-native';
Step 2: Add this style in parent View
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
Full Code:
import React, { Component } from 'react';
import {
Text, View,
Platform, StatusBar
} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
<Text>This is Text</Text>
</View>
);
}
}

You can create a <NavigationContainer/> component to hold all your different pages, so that you don't need to duplicate the StatusBar and padding code in every single screen component.
I created a example in here:　https://snack.expo.io/SyaCeMOwW
And nothing need to change in term of your navigation structure or redux flow.

How do you use custom fonts with React-native android?

I'm having difficulty getting custom webfonts to work with react-native on android.
I have followed the instructions from here https://medium.com/#gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.w6aok6lpw but to no success.
I've tried with a few different fonts, still no joy.
nb I've tried renaming the font files, replaces dashes with underscores, all lowercase, and so on, but still no success.
Any help, greatly appreciated. This is my code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
class MyBeltingApp extends Component {
render() {
return (
<View>
<Text style={styles.welcome}>
Straigtline
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontFamily: 'GT-Walsheim-Bold',
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('MyBeltingApp', () => MyBeltingApp);

I've managed to get the fonts working.
Created a fonts folder in the root of my project.
then in package.json
"rnpm": {
"assets": ["fonts"]
}
then run rnpm link assets
huzzah...
nb. I didn't have to change any files names or anything. they work with dashes just fine.

How to change the default fontFamily in react-native

Can I set a default fontFamily in my app (iOS and Android)??
I don't want set it in each screen.
Any idea?

The only way to do this is from the native side of things. See here:
Set a default font for whole iOS app?
and
Is it possible to set a custom font for entire of application?
Although, if you use the library Cairn (disclaimer: I wrote it) it's trivial. Simply define your global text style and extend from it everywhere. Cairn makes all global stuff reusable while not breaking component-specific overrides and extensions.
// styles.js
import { createStylesheet } from 'react-native';
import cairn from 'cairn';
export default cairn({
text: {
fontFamily: '...'
}
}, (styles) => createStylesheet(styles));
Then extend those global styles in your component and apply to your text element:
// components/MyComponent.js
import styleContext from '../styles';
const style = styleContext.extend({
'text.header': {
fontSize: 30
}
});
export default const MyComponent = () => (
// Spreads style={[styleContext.text, style['text.header']]}
<Text {...style('text.header')}>Header!</Text>
);