I have a error when I using react-native-textinput-effects .
This is my error message:
fontFamily 'Arial' is not a system font and has not been loaded
through Expo.Font.loadAsync.
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
in diffProperties
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Expo.Font.loadAsync.
node_modules\expo\src\Font.js:34:10 in processFontFamily
node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
in diffProperties
... 30 more stack frames from framework internals
This is my code:
import React, { Component } from 'react'
import { StyleSheet, View, Text, TextInput, Image, TouchableOpacity } from 'react-native'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Font } from "expo";
import { Fumi} from 'react-native-textinput-effects';
class Login extends React.Component {
render() {
return (
<View style={styles.main_container}>
<View style={styles.subview_container}>
<View style={[styles.card2, { backgroundColor: '#a9ceca' }]}>
<Text style={styles.title}>Fumi</Text>
<Fumi
label={'Course Name'}
labelStyle={{ color: '#a3a3a3' }}
inputStyle={{ color: '#f95a25' }}
iconClass={FontAwesomeIcon}
iconName={'university'}
iconColor={'#f95a25'}
iconSize={15}
/>
<Fumi
style={styles.input}
label={'Degree'}
iconClass={FontAwesomeIcon}
iconName={'graduation-cap'}
iconColor={'#77116a'}
/>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#555500',
},
subview_container: {
},
card2: {
padding: 16,
},
input: {
marginTop: 4,
},
title: {
paddingBottom: 16,
textAlign: 'center',
color: '#404d5b',
fontSize: 20,
fontWeight: 'bold',
opacity: 0.8,
}
})
export default Login
I tried to load the Arial font using this code but without success :
componentDidMount() {
Font.loadAsync({
'Arial': require('./assets/fonts/Arial.ttf'),
});
}
Can you help me?
check this, it is work correctly code for app.js, just adapt for your case
import React from "react";
import { AppLoading, Font } from "expo";
import { StyleSheet, Text, View } from "react-native";
export default class App extends React.Component {
state = {
loaded: false,
};
componentWillMount() {
this._loadAssetsAsync();
}
_loadAssetsAsync = async () => {
await Font.loadAsync({
diplomata: require("./assets/fonts/DiplomataSC-Regular.ttf"),
});
this.setState({ loaded: true });
};
render() {
if (!this.state.loaded) {
return <AppLoading />;
}
return (
<View style={styles.container}>
<Text style={styles.info}>
Look, you can load this font! Now the question is, should you use it?
Probably not. But you can load any font.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
padding: 30,
},
info: {
fontFamily: "diplomata",
textAlign: "center",
fontSize: 14,
},
});
Related
I am fairly new to react native, but I have some experience. I am creating my own app for both ios and android by following along a tutorial that I had already completed and making my own modifications. As I was in the middle of creating an app, I forgot to add a background image. After struggling with this for several days, I'm desperate, so I decided to ask my question on here.
I am trying to add the background image to my App.js file. The image loads properly, but my page content ( which is inside <LifelineNavigator />) is either hidden or has disappeared for android. And for ios, the content seems to be in a small centered flexbox. Also, I am trying to remove the white background.
Any suggestions would definitely help. Thanks so much! God bless!
Here is my code:
import React, { useState } from "react";
import { StyleSheet, View, ImageBackground } from "react-native";
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import { enableScreens } from "react-native-screens";
import LifelineNavigator from "./src/navigation/LifelineNavigator";
enableScreens();
const fetchFonts = () => {
return Font.loadAsync({
"Gotham-Medium": require("./src/assets/fonts/Gotham-Font/Gotham-Medium.otf")
const image = {
uri: "https://i.ibb.co/8z6QbTS/Lifeline-Gradient-Background-24.png",
};
const App = () => {
const [fontLoaded, setFontLoaded] = useState(false);
if (!fontLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setFontLoaded(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<View >
<ImageBackground source={image} style={styles.image}>
<View style={ styles.container }>
<LifelineNavigator />
</View>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
// backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
image: {
width: "100%",
height: "100%" ,
}
});
export default App;
IOS Screenshot
Android Screenshot
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000c0"
}
});
export default App;
follow this documentation > https://reactnative.dev/docs/imagebackground
it may solve your problem
i am new to react native following a tutorial. I noticed there is no consistency of buttons between android and iOS so i thought i'd try react-native-paper library.
however, after importing the button from react-native-paper i am having problems changing the color of the button. the color is a constant color as in the image provided how the color looks
how can i manipulate the color? also is there a better library to use for button consistency between android and iOS ?
thanks
here is the code :
// import stuff
import React from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import {
Provider as PaperProvider,
DarkTheme,
DefaultTheme,
Button
} from 'react-native-paper';
// import { Button } from 'react-native-paper';
//create stuff
class App extends React.Component {
state = {
text: "",
todo: []
}
addTodo = () => {
var newTodo = this.state.text
var arr = this.state.todo
arr.push(newTodo)
this.setState({ todo: arr, text: "" })
}
deleteTodo = (t) => {
var arr = this.state.todo;
var pos = arr.indexOf(t);
arr.splice(pos, 1);
this.setState({ todo: arr });
}
renderTodos = () => {
return this.state.todo.map(t => {
return (
<TouchableOpacity key={t}>
<Text
style={styles.todo}
onPress={() => { this.deleteTodo(t) }}
>{t}</Text>
</TouchableOpacity>
)
})
}
render() {
return (
<PaperProvider>
<View style={styles.wholeStyle}>
<View style={styles.viewStyle}>
<Text style={styles.header}>Notes App</Text>
<TextInput
style={styles.inputStyle}
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
<Button
onPress={this.addTodo}
mode='contained'
backgroundColor='black'
>Todo</Button>
{this.renderTodos()}
</View>
</View>
</PaperProvider>
)
}
}
const styles = {
wholeStyle: {
flex: 1,
backgroundColor: '#0288D1'
// backgroundColor: 'red'
},
viewStyle: {
alignItems: 'center',
justifyContent: 'center',
margin: 10,
marginTop: 30,
},
inputStyle: {
alignSelf: 'stretch',
height: 40,
borderColor: "white",
borderWidth: 1
},
header: {
fontSize: 40,
color: 'white',
fontWeight: 'bold'
},
todo: {
fontSize: 18,
color: 'white'
}
}
//export stuff
export default App;
from docs, labelStyle
UPDATE: thanks for the feed back, I managed to correct my code , adding a button using the property labelStyle to style the text inside the button, here is the final code , setting the button to black background and red text :
// import stuff
import React from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import {
Provider as PaperProvider,
DarkTheme,
DefaultTheme,
Button
} from 'react-native-paper';
// import { Button } from 'react-native-paper';
//create stuff
class App extends React.Component {
state = {
text: "",
todo: []
}
addTodo = () => {
var newTodo = this.state.text
var arr = this.state.todo
arr.push(newTodo)
this.setState({ todo: arr, text: "" })
}
deleteTodo = (t) => {
var arr = this.state.todo;
var pos = arr.indexOf(t);
arr.splice(pos, 1);
this.setState({ todo: arr });
}
renderTodos = () => {
return this.state.todo.map(t => {
return (
<TouchableOpacity key={t}>
<Text
style={styles.todo}
onPress={() => { this.deleteTodo(t) }}
>{t}</Text>
</TouchableOpacity>
)
})
}
render() {
return (
<PaperProvider>
<View style={styles.wholeStyle}>
<View style={styles.viewStyle}>
<Text style={styles.header}>Notes App</Text>
<TextInput
style={styles.inputStyle}
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
<Button
onPress={this.addTodo}
mode='contained'
color='black'
labelStyle={styles.button}
>Todo</Button>
{this.renderTodos()}
</View>
</View>
</PaperProvider>
)
}
}
const styles = {
wholeStyle: {
flex: 1,
backgroundColor: '#0288D1'
// backgroundColor: 'red'
},
viewStyle: {
alignItems: 'center',
justifyContent: 'center',
margin: 10,
marginTop: 30,
},
inputStyle: {
alignSelf: 'stretch',
height: 40,
borderColor: "white",
borderWidth: 1
},
header: {
fontSize: 40,
color: 'white',
fontWeight: 'bold'
},
todo: {
fontSize: 18,
color: 'white'
},
button: {
color: 'red'
},
}
//export stuff
export default App;
Looking at react-native-paper Docs looks like backgroundColor is not a valid prop to pass.
The prop to use is just color so it would be:
color:{ "black" }
I think according to react-native-paper Docs , You can add custom styles in the style prop. define some style object in your stylesheet and asign that object in your button.
<Button
onPress={this.addTodo}
mode='contained'
style={styles.mybuttonstyles}>Todo
</Button>
//In Your Styles Section,
const styles = StyleSheet.create({
mybuttonstyles:{
backgroundColor:'black'
// all more styles you would like
}
i think this should work. in react-native-elements buttons, its similar. (instead of style, you should provide your style object buttonStyle for custom styles.) also make sure you create a Stylesheet and make sure to import that Stylesheet like
import { View, Text,StyleSheet } from 'react-native';
I'm trying to display some fetched data in app using FlatList . It works but there is a bloody big space between items!
Here is my FlatList code:
<View style={styles.showresp}>
<FlatList
data={this.state.responsjson}
renderItem={({ item }) =>
<View style={styles.weatherview}>
<Text style={styles.city}>{item.name}</Text>
<Text style={styles.country}>{item.country}</Text>
<Text style={styles.temp}>{item.temp_c}</Text>
</View>}/>
</View>
this is what i see in screen
and it is styles :
showresp: {
backgroundColor: '#fffa',
height: 315,
marginRight: '10%',
marginLeft: '10%',
marginTop: '15%',
borderRadius: 15
},
weatherview:{
alignItems: 'center',
justifyContent: 'center',
flex :1
},
city: {
fontFamily :'Wonderbar Demo',
fontSize:40,
color:'#880e4f',
},
country:{
fontSize:20,
fontFamily:'Samim-Bold',
backgroundColor:'red',
},
temp:{
fontFamily :'Wonderbar Demo',
fontSize : 40,
backgroundColor:'green',
},
I set the background color for up and down Texts to find the problem but i don't have any bloody idea about it.
could you guide me on this matter?ಠ_ಠ
I made an example for you. Look at this. The difference between you and me is no margin.
And I have my parents as a flatist.
You don't have to put View aside like this. You can put the view in the item you want.
import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
const users = [
{
name: 'Cathy Gilliam',
company: 'EXOVENT',
email: 'cathygilliam#exovent.com',
},
{
name: 'Norton Potts',
company: 'COREPAN',
email: 'nortonpotts#corepan.com',
},
{
name: 'Kelly Collins',
company: 'SECURIA',
email: 'kellycollins#securia.com',
},
];
export default class App extends Component {
render() {
return (
<FlatList
data={users}
renderItem={({ item }) => (
<View
style={{
borderBottomWidth: 1,
borderBottomColor: 'grey',
padding: 10
}}>
<View>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>{item.name}</Text>
<Text>{item.company}</Text>
<Text>{item.email}</Text>
</View>
</View>
)}
/>
);
}
}
It should work:
import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
responsjson: [{
name: 'Name1',
country: 'Country1',
temp_c: '45'
},
{
name: 'Name2',
country: 'Country2',
temp_c: '45'
}]
};
}
render() {
return (
<View style={styles.showresp}>
<FlatList
data={this.state.responsjson}
renderItem={({ item }) =>
<View style={styles.weatherview}>
<Text style={styles.city}>{item.name}</Text>
<Text style={styles.country}>{item.country}</Text>
<Text style={styles.temp}>{item.temp_c}</Text>
</View>} />
</View>
);
}
}
const styles = StyleSheet.create({
showresp: {
backgroundColor: '#fffa',
height: 315,
marginRight: '10%',
marginLeft: '10%',
marginTop: '15%',
borderRadius: 15
},
weatherview: {
alignItems: 'center',
justifyContent: 'center',
flex: 1
},
city: {
fontFamily: 'Wonderbar Demo',
fontSize: 40,
color: '#880e4f',
},
country: {
fontSize: 20,
fontFamily: 'Samim-Bold',
backgroundColor: 'red',
},
temp: {
fontFamily: 'Wonderbar Demo',
fontSize: 40,
backgroundColor: 'green',
},
});
Image:
I've recently added react-native-navigation to my project, and now I can't get imported stylesheet to work. What I'm trying to do is this:
import screenstyles from './screenstyles';
class Screen extends Component {
render() {
return (
<View style={screenstyles.container}>
<Text style={screenstyles.basictext}>Text I want to display</Text>
</View>
);
}
screenstyles.js:
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '$primaryBlue'
},
basictext: {
color: "#fff",
fontSize: 34
}
});
But I simply get a default white screen with unstyled text.
The only way I get any sort of imported styling to work at the moment is by doing this
import {Container, styles} from '../components/Container';
class Screen extends Component {
render() {
return (
<Container backgroundColor={"red"}>
</Container>
);
}
}
Container.js:
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: '500'
}
});
const Container = ({onPress, backgroundColor, texttest}) => (
<View style={[styles.container, {backgroundColor}]}>
<Text style={styles.text}></Text>
</View>
);
export default Container;
This approach isn't the best because it makes it much more difficult to use the same stylesheet for each screen but still being able to customize the screen.
Try rewriting the screenstyles.js file as follows:
const React = require('react-native-extended-stylesheet');
const { EStyleSheet } = React;
var styles = EStyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '$primaryBlue'
},
basictext: {
color: "#fff",
fontSize: 34
}
});
module.exports = styles;
I have this screen in react native
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.move()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
move() {
//what i can do here to go to Socrce screen ???
}
}
Something like login screen, now when I click into TouchableHighlight
I need to open this screen
'use strict';
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class HygexListView extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
module.exports = HygexListView;
I tried to implement move method but I failed! Any idea why?
Does react-native have a method to change the screen when click into TouchableHighlight?
As others pointed out, you have to use an instance of Navigator to transition between screens. Maybe you can have a look at the example apps in the React Native repo. I also find this router package quite easy to set up, and it also includes an example app that you can use as a starting point.
Edit
As a simple example using react-native-router-flux, you can edit the Example.js file in the Example directory to look like this:
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import LoginView from './LoginView';
import HygexListView from './HygexListView';
import {
Scene,
Router,
Actions,
} from 'react-native-router-flux';
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
alignItems: 'center',
},
tabBarStyle: {
backgroundColor: '#eee',
},
tabBarSelectedItemStyle: {
backgroundColor: '#ddd',
},
});
// define this based on the styles/dimensions you use
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
const style = {
flex: 1,
backgroundColor: '#fff',
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
};
if (computedProps.isActive) {
style.marginTop = computedProps.hideNavBar ? 0 : 64;
style.marginBottom = computedProps.hideTabBar ? 0 : 50;
}
return style;
};
class Example extends Component {
render() {
return (
<Router getSceneStyle={getSceneStyle}>
<Scene key="login" component={LoginView} initial={true}/>
<Scene key="hygex" component={HygexListView } />
</Router>
);
}
}
export default Example;
Then, in your component's move function, you have to do the following:
move(){
Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that.
I have not tested the code, so there might be some typos/missing imports/code, but it should give you an idea of what you have to do.
}
You have to implement a Navigator, which is roughly a component that manages all stuff related to screens, and header bar with back button and etc.
As you are a beginner, I suggest you to look at the docs on this link:
https://facebook.github.io/react-native/docs/navigator.html
Sorry for the short answer, I'm on my phone.
Good luck!
"use strict";
var React = require("react-native");
var {
Component,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View,
} = React;
var SecureView = require("./SecureView");
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Sign In
</Text>
<View>
<TextInput
placeholder="Username"
onChange={(event) => this.setState({username: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.username} />
<TextInput
placeholder="Password"
secureTextEntry={true}
onChange={(event) => this.setState({password: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.password} />
<TouchableHighlight onPress={(this.onSubmitPressed.bind(this))} style={styles.button}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</View>
</View>
);
}
onSubmitPressed() {
this.props.navigator.push({
title: "Secure Page",
component: SecureView,
passProps: {username: this.state.username, password: this.state.password},
});
}
};
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;
You have to use navigator. please read the documentation as mentioned below. and if you will need then i will share you my code.
Here is an example: NavigatorExample