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.
Related
I've been using the library to create bottom sheet modals for my react native app, but it's doesn't seem to work on Android, but on iOS it does. I used the same backdrop component and handle component suggested in the docs, and everything is contained is the provider, and SafeAreaView
my package.json includes
"#gorhom/bottom-sheet": "^3.6.5",
"react-native-reanimated": "^2.0.0",
and the code is structured like this:
<BottomSheetModal ref={reference_settings}
index = {1}
enableOverDrag={true}
onChange = {(index) => { if(index === 0) { reference_settings.current.dismiss(); } }}
snapPoints = {[-1, '50%', '70%']}
backdropComponent={Backdrop}
handleComponent ={(props) => (<Belt {...props} />)}
style ={styles.sheet}
>
<BottomSheetView style={[styles.content]}>
<View style={{ width, height: '100%', overflow: 'hidden', backgroundColor: scheme === 'dark' ? '#000' : '#FFF', paddingHorizontal: 10 }}>
// the functions inside
</View>
</BottomSheetView>
</BottomSheetModal>
I used the right configuration for babel for react-native-reanimated including the plugin, but it shows up and then I can't drag to close.
I know it's a bit late to answer for you but I would like to add for others. Assuming you already installed react-native-gesture-handler you should also add some lines of code to your MainActivity.java.
Don't forget to wrap your Root App Component like this in the index.js file
place the the import statement at the top of index.js
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
more details
My react-native app look totally fine on most Android devices (and iOS) I tested on emulator, but some devices with noticeable curved screen on top (Google Pixel 4, API 29), it shows a big empty region on top of the phone.
This does not look normal. Do you know how to fix it ?
I am using SafeAreaView but without any Android specific padding/margin.
<SafeAreaView style={{flex:1}}>
... My App Code come here.
</SafeAreaView>
I also tried to remove the the SafeAreaView and used regular View instead but it still wont go away.
Just for testing I removed everything and added a hello world test screen.
It still gives same wide empty space.
My App.js:
export default class Main extends React.Component {
constructor(props) {
super (props);
}
render () {
return (
<View style={{flex:1, backgroundColor: 'white'}}>
<Text> Hello World, How to fix this ? </Text>
</View>
);
}
}
AppRegistry.registerComponent(appName, () => Main);
You can't remove it, it's a display bug on the Pixel 4 emulator. A physical Pixel 4 doesn't have that gap.
See my other answer for a detailed explanation.
You can achieve this simply by hiding your StatusBar just like this:
import React from "react";
import { StatusBar, View, Text } from "react-native";
export default class Main extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
StatusBar.setHidden(true);
}
render() {
return (
<View style={{ flex: 1, backgroundColor: 'white' }}>
<Text> Hello World, How to fix this ? </Text>
</View>
);
}
}
Update: set StatusBar's transluent attribute to true along with make its' background as transparent like this:
import React, { Component } from "react";
import { StatusBar, View, Text } from "react-native";
export default class Main extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
StatusBar.setTranslucent(true);
StatusBar.setBackgroundColor("transparent");
}
render() {
return (
<View style={{ flex: 1, backgroundColor: 'white' }}>
<Text> Hello World, How to fix this ? </Text>
</View>
);
}
}
Have you tried using this way
<StatusBar translucent={true} hidden={true} /> {/* <--- Here */}
Check statusbar component where you can draw an app under the status bar by using the property named translucent. Reference link
I managed to fix this by going to AVD Manager -> Click on Wipe Data
Img
I would like to place a component, in this case a simple text app version number that is clickable and will force a version refresh, on the screen of a react native app. I would like this to be visible no matter what platform the app is running on (iOS/Android/device/simulator/react-native-web), and no matter what else happens on the screen in the app. If there are other things displayed, I'd like this component to display on top of them. I have not been able to do this.
(Aside: This is for debugging, as I have not found that the Expo system reliably reloads and presents the current version of the app. If someone would like to comment with a solution to this, great).
I've tried many things, for example, including the component below in the main app.js file. In this case, it will display for all screens on iOS simulator, but not on Android device. From other posts, I understand that this may have to do with Android limitations.
Thank you for your help.
import React, { Component } from 'react'
import { StyleSheet, Text, View,TouchableHighlight } from 'react-native'
import { Ionicons } from '#expo/vector-icons'
import { Updates } from 'expo';
export default class AppVersion1 extends Component {
_onPressButton = ()=> {
AppConsole.log('Pressed reload')
Updates.reload()
}
render(){
return(<View style={styles.appVersionPosition}>
<TouchableHighlight onPress={this._onPressButton}>
<Text
style={styles.appversion}
onPress={this.reload}
>
<Ionicons name="md-refresh" /> Beta043</Text>
</TouchableHighlight>
</View>)}
}
const styles = StyleSheet.create({
appversion: {
color:'white',
backgroundColor:'#68a0cf',
textAlign: 'center',
fontSize:10,
zIndex: 99999
},
appVersionPosition: {
position: 'absolute',
top: '7%',
left: 0,
backgroundColor: 'grey',
zIndex: 99999
}
})
I need to force app font inside the app and not to be overridden by system font. Namely font size and fontFamily. I also added the font I am using in assets and resources for android and iOS respectively.
rn: 0.42
Just add styles to Text component like:
<Text style={{ fontSize: 13, ... }>some text</Text>.
If you want to use the same styles everywhere in the app just create your own component:
import { Text } from 'react-native';
const MyCustomText = (props) => {
const { style, children, ...rest } = props;
return (
<Text style={[{fontSize: 13}, style]} {...rest}>{children}</Text>
)
}
export default MyCustomText;
I am trying to use the react-native's ToolbarAndroid from react-native-vector-icons's Icon.ToolbarAndroid. But I am getting this error:
RNVectorIconsModule not available, did you properly integrate the module?
I have installed rnpm also did rnpm link, which was completed successfully.
And I think I have properly integrated the module, because this code works where I get the icons from react-native-vector-icons/Ionicons:
(WORKING)
import Icon from 'react-native-vector-icons/Ionicons';
const searchIcon = (<Icon name="md-search" size={30} color="#4F8EF7" />)
const menuIcon = (<Icon name="md-menu" size={30} color="#4F8EF7" />)
const notificationIcon = (<Icon name="md-notifications-outline" size={30} color="#4F8EF7" />)
export default class Header extends Component {
render() {
return(
<View>
<Text>{searchIcon}</Text>
<Text>{menuIcon}</Text>
<Text>{notificationIcon}</Text>
</View>
)
}
}
But this code doesn't work:
(NOT WORKING)
import Icon from 'react-native-vector-icons/Ionicons';
export default class Header extends Component {
render() {
return(
<Icon.ToolbarAndroid
title="Home"
titleColor="white"
navIconName="md-search"
actions={[
{ title: 'Settings', iconName: 'md-menu', iconSize: 30, show: 'always' },
{ title: 'Follow me on Twitter', iconName: 'md-notifications-outline', iconColor: "#4099FF", show: 'ifRoom' },
]}
overflowIconName="md-more"
/>
)
}
}
I am very new to react-native so I may be doing something wrong? Will you please help me figure it out. Thank you.
As you have probably seen (I also saw your message on Github), the complete instructions are here: https://github.com/oblador/react-native-vector-icons#integrating-library-for-getimagesource-and-toolbarandroid-support
I had the same issue as yours. By completing the instructions, I successfully manage to make it work.
I will not duplicate the instructions but to clarify:
1) Edit android/settings.gradle
2) Edit android/app/build.gradle
3) Edit your MainApplication.java