I'm using the expo application on my phone to build a simple react native application, but I'm unable to render simple text. Is there something I'm doing wrong?
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import bball from './assets/bball.jpeg'
export default class App extends Component {
render() {
let pic = {
uri: bball
}
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={{pic}} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Have you tried this way?
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={require('./assets/bball.jpeg')} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
#Myers Nii-Ansah, try to import image like
const image = require('./my-icon.png');
just use directly bbal in the source of image.
<Image source={bbal} />
if you have url of any image use like this.
<Image source={{uri: "https://example.com/image.png"}} />
so you can do this way if any how you can have image url from your component state.
render() {
let pic = this.state.url ? { uri: this.state.url } : bbal
return (
<View style={styles.container}>
<Text>hello, world</Text>
<Image source={pic} />
</View>
)
}
Related
I am a newbie. I'm making a YouTube Clone using React-Native.In my project I'm trying to use custom google fonts via expo/google and I'm following their example. I installed "balsamiq-sans" font using npx expo install #expo-google-fonts/balsamiq-sans. Imported in App.js and it works ! BUT, when I try to use it in Header.js (component) it does not work. The fonts does not change.
Here's what I'v done-
App.js file
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/screens/Home'
import AppLoading from 'expo-app-loading';
import { useFonts, BalsamiqSans_400Regular } from '#expo-google-fonts/balsamiq-sans';
export default function App() {
let [fontsLoaded] = useFonts({
BalsamiqSans_400Regular,
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<View>
<Home />
<Text style={{fontFamily: "BalsamiqSans_400Regular"}}> This Works ! </Text>
</View>
);
}
}
Home.js
import { StyleSheet, Text, View } from 'react-native';
import Header from '../components/Header';
export default function Home() {
return (
<View >
<Header />
</View>
);
}
And finally, Header.js
import { StyleSheet, Text, View } from 'react-native';
import {Entypo} from "#expo/vector-icons"
import { Ionicons } from '#expo/vector-icons';
import Constant from 'expo-constants'
export default function Header() {
return (
<View style={{
paddingTop:Constant.statusBarHeight,
height: 80,
backgroundColor: "white",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
elevation: 5
}}>
<View style={{
flexDirection: "row",
margin: 5,
padding: 5,
alignItems: "center"
}}>
<Entypo style={{
marginLeft: 20
}} name='youtube' size={24} color="red" />
<Text style={{
fontSize: 19,
marginLeft: 10,
fontWeight: "bold",
fontFamily: "BalsamiqSans_400Regular"
}}>Does not work</Text> // this does not work
</View>
<View style={{
flexDirection: "row"
}} >
<Ionicons name="ios-search-circle" size={27} color="black" />
<Ionicons style={{marginRight: 20, marginLeft: 20}} name="ios-sunny-sharp" size={25} color="black" />
</View>
</View>
)
}
Any ideas? what am I doing wrong. And sorry for bad English.
Edit: Fonts change in web but does not change in my Android emulator and in my Android Phone(using Expo Go)
move this to header component
import { useFonts, BalsamiqSans_400Regular } from '#expo-google-fonts/balsamiq-sans';
export default function Header() {
let [fontsLoaded] = useFonts({
BalsamiqSans_400Regular,
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
then read this docs to know what formats work on which platforms:
I made a webview application with react native to display the Facebook website but there was a problem when I wanted to upload a photo by clicking the upload photo button in the pop status section there was no response ... what was the solution?
import React, { Component } from 'react';
import { Button, View, WebView, StyleSheet, TouchableOpacity, Text, Image } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.reload = this.reload.bind(this);
}
reload() {
this.webview.reload();
}
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ height: 20 }} />
<WebView
ref={ref => (this.webview = ref)}
source={{ uri: 'https://facebo.com' }}
onError={console.error.bind(console, 'error')}
bounces={false}
onShouldStartLoadWithRequest={() => true}
javaScriptEnabledAndroid={true}
startInLoadingState={true}
style={{ flex: 1 }}
/>
<View style={{alignItems:'center'}}>
<TouchableOpacity onPress={this.reload}>
<Image source={require('../assets/reload.png')} style={styles.fab} />
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
fab: {
width: 40,
height: 40,
justifyContent: 'center',
},
});
Why do my images not appear when I run the application on my mobile device? I've simply followed this tutorial and added a few lines of code: https://facebook.github.io/react-native/docs/getting-started.html.
import React, {
Component
} from 'react';
import {
AppRegistry,
Image,
StyleSheet,
Text,
View
} from 'react-native';
var MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
export default class AwesomeProject extends Component {
render() {
var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<Text>{movie.title}</Text>
<Text>{movie.year}</Text>
<Image source={{uri: movie.posters.thumbnail}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Image appears when the width and height properties are set.
<Image style={{width: 60, height: 60}} source={{uri: movie.posters.thumbnail}} />
Try https instead http. It could be the main problem.
I am fetching data through an async request. I know that I need to wait for the api request to complete before displaying the data. Unfortunately, I'm not sure how to create a loader to wait for the data to load.I am new to react, so if I could also get help with implementing it as well, that would be fantastic! Here is my current code:
import React, { Component, PropTypes } from 'react';
import { View, Text, ListView, StyleSheet, TouchableHighlight} from 'react- native';
import Header from '../Components/Header';
import Api from '../Utility/Api';
export default class CalendarPage extends Component {
constructor(props) {
super(props);
}
async componentWillMount() { this.setState(
{data: await Api.getDates()},
)
}
render() {
return (
<View style={{flex: 1}}>
<Header pageName="Calendar" navigator={this.props.navigator}/>
<View style = {{flex:9}}>
<View>
{ this.state.data.days[0].items.map((item) => (
<View>
<Text>{item.summary}</Text>
<Text>{item.start.dateTime}</Text>
<Text>{item.description}</Text>
</View>
))}
</View>
</View>
</View>
);
}
}
A simple example using ActivityIndicator -
import ActivityIndicator
import { View, Text, ListView, StyleSheet, TouchableHighlight, ActivityIndicator} from 'react- native';
set data state to null
constructor(props) {
super(props);
this.state = {
data: null
}
}
do conditional rendering
render() {
if (!this.state.data) {
return (
<ActivityIndicator
animating={true}
style={styles.indicator}
size="large"
/>
);
}
return (
<View style={{flex: 1}}>
<Header pageName="Calendar" navigator={this.props.navigator}/>
....
....
</View>
);
}
}
indicator style
const styles = StyleSheet.create({
indicator: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: 80
}
});
Although solution proposed by #vinayr works fine but user will still be able to click on screen and perform some action even while loader is being shown which can lead to crash.
One solution is wrap loader inside a Modal.
import React, { Component } from 'react';
import {
StyleSheet,
View,
Modal,
ActivityIndicator,
} from 'react-native';
const styles = StyleSheet.create({
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'space-around',
backgroundColor: '#00000040',
},
activityIndicatorHolder: {
backgroundColor: '#FFFFFF',
height: 100,
width: 100,
borderRadius: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
},
});
const SmartLoader = (props) => {
const {
isLoading,
...attributes
} = props;
return (
<Modal
transparent
animationType={'none'}
visible={isLoading}
onRequestClose={() => { console.log('Noop'); }}
>
<View style={styles.modalBackground}>
<View style={styles.activityIndicatorHolder}>
<ActivityIndicator
animating={isLoading}
size="large"
/>
</View>
</View>
</Modal>
);
};
export default SmartLoader;
After that you can use it anywhere in your component, user will not be able to perform any action till loader is finished ( made hidden based on flag)
I have a component for listing items, I want to add the function that can go to a different page, and that page has the detail about that item. Currently, this is my code for listing items.
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import CarDetail from './CarDetail';
const API_URL = 'http://localhost:3000';
class CarList extends Component {
state = { cars: [] };
componentWillMount() {
console.log('Mount');
axios.get(`${API_URL}/cars`)
.then(response => this.setState({ cars: response.data.cars }));
}
renderCars() {
return this.state.cars.map(car => <CarDetail key={car.id} car={car} />
);
}
render() {
console.log(this.state.cars);
return (
<ScrollView>
{this.renderCars()}
</ScrollView>
);
}
}
export default CarList;
and this is the code for describing items
import React from 'react';
import { Text, View, Image } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Card from '../material/Card';
import CardSection from '../material/CardSection';
const CarDetail = ({ car }) => {
const imageURI = 'https://yt3.ggpht.com/-HwO-2lhD4Co/AAAAAAAAAAI/AAAAAAAAAAA/p9WjzQD2-hU/s900-c-k-no-mo-rj-c0xffffff/photo.jpg';
const { make, model } = car;
function showCarDetail() {
Actions.showCar();
}
return (
<Card>
<CardSection>
<View style={styles.containerStyle}>
<Image
style={styles.imageStyle}
source={{ uri: imageURI }}
/>
</View>
<View style={styles.headContentStyle}>
<Text
style={styles.headerTextStyle}
onPress={showCarDetail()}
>
{make}
</Text>
<Text>{model}</Text>
</View>
</CardSection>
<CardSection>
<Image
style={styles.picStyle}
source={require('./car.jpg')}
/>
</CardSection>
</Card>
);
};
const styles = {
headContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTextStyle: {
fontSize: 18
},
imageStyle: {
height: 50,
width: 50
},
containerStyle: {
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
marginRight: 10
},
picStyle: {
height: 300,
flex: 1,
width: null
}
};
export default CarDetail;
How can I change my code for that? Can anyone give me an example?
You have to use some sort of navigation component. There are many out there, but personally I use the one that is built into React Native. https://facebook.github.io/react-native/docs/navigator.html