I put my images in drowable-*dpi folders,
The image name without capital letters, and its legal name.
The prefix is .png
In index.android.js file:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class proj extends Component {
render() {
return (
<View style={styles.container}>
<Image source={{uri: 'background_home'}} style={{width: 40, height: 40}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('proj', () => proj);
When I run this code -> nothing... the image not shown on my android device.
What can I do to resolve this issue?
Thanks!
There is no support for accessing images under mipmap directory in react-native as of now.
Create a directory called drawable under res directory (Parent directory of mipmap-*). Put your images in that directory. Then your code will work.
Later move all your images based on density to respective directories like drawable-hdpi,drawable-xhdpi,drawable-xxhdpi etc.
Related
Hello I'm working with my project and I want to fetch poster_patch into variable to print every single image of miniatures in my app. Im working with react-native in. Here is some code of my app. I want to create function to fetch value of path_poster and add it after to uri
Top.js
`
import React,{useState,useEffect} from "react";
import { View, StyleSheet, Text } from "react-native";
import MovieBox from './MovieBox';
const API_URL="https://api.themoviedb.org/3/movie/top_rated?api_key=xxx"
export default function Top(){
const [movies,setMovies]=useState([]);
useEffect(()=>{
fetch(API_URL)
.then((res)=>res.json())
.then(data =>{
console.log(data);
setMovies(data.results);
})
}, [])
return (
movies.map((movieReq)=><MovieBox key ={movieReq.id} {...movieReq}/>)
);
};
`
MovieBox.js
`
import React from 'react';
import { View, StyleSheet, Text,Image } from "react-native";
const API_IMG = "https://image.tmdb.org/t/p/w500";
function MovieBox ({title, poster_patch,vote_average,release_date,overview}){
const styles = StyleSheet.create({
container: {
paddingTop: 50,
},
tinyLogo: {
width: 50,
height: 50,
},
logo: {
width: 66,
height: 58,
},
});
return(
<View>
<Text>
{title} rated:
{vote_average}
</Text>
<Image source={{
uri: API_IMG + HERE I WANT TO ADD VARIABLE TO POSTER_PATCH,
}}
style={styles.tinyLogo}
/>
</View>
)
}
export default MovieBox;
`
How to get values from poster_path and add it into uri
Join base url and path for example using concat.
<Image source={{
uri: API_IMG.concat(poster_path),
}}
style={styles.tinyLogo}
/>
See Images for details.
In his video, in the last part, he says that at the time of his Recording in iOS the padding is not applying when he applies it in the Screen component, but it actually works on Android. And at the end, when you do exactly what he suggests, a double layer of padding is added in the Android version.
import React from 'react';
import { View, SafeAreaView, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
function SafeScreen({children, style}) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={style}>{children}</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
flex: 1,
}
})
export default SafeScreen;
I did find the Fix myself so look at my answer.
Here is the Fix that I did:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
function SafeScreen({children, style}) {
return (
<View style={[styles.screen ,style]}>{children}</View>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
flex: 1,
},
})
export default SafeScreen;
Just simply don't use the SafeAreaView by React Native and instead apply the screen styling to the View.
I trying to add a video for my splash screen in my react-native app I added some lines of code and get no errors but the splash screen video doesn't play when starting the app by clicking the icon on an android phone or emulator. I created a folder where the video is. Any feedback is appreciated :)
import React, {useEffect} from 'react'
import {StyleSheet, View, Video, Text, Image} from 'react-native'
import Color from '../utils/Colors'
import Images from '../const/Images'
import Constants from '../const/Constants'
import firebase from '../firebase/Firebase'
import Video from '../video/Video'
function SplashScreen({navigation}){
useEffect(()=> {
NavigateToAuthORGroupScreen()
}, [navigation])
function NavigateToAuthORGroupScreen(){
setTimeout(function (){
firebase.auth().onAuthStateChanged((user) => {
if (user != null){
navigation.reset({
index:0,
routes: [{name: 'Groups Screen'}]
})
}else{
navigation.reset({
index:0,
routes: [{name: 'SignInScreen'}]
})
}
})
},2600)
}
return(
<View style = {styles.constainer}>
<Image style = {styles.logo} source = {Images.logo}></Image>
<Video style = {styles.video} source = {Images.video} autoPlay loop></Video>
</View>
)
}
const styles = StyleSheet.create({
video:{
width: '100%',
height: 0.06 * Constants.screenHeight
},
logo: {
alignSelf: 'center',
margin: 0.04 * Constants.screenHeight
},
constainer: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
backgroundColor: Color.vibenote
}
})
export default SplashScreen
Images.js file: below
const images = {
logo: require('../../assets/logo.png'),
add: require('../../assets/add.png'),
logout: require('../../assets/logout.png'),
groups: require('../../assets/groups.png'),
video: require('../../assets/vnspl.mp4')
Can You Please Show the error that you get?
One more thing you called VideoView but I can't see you import any VideoView in your code.
I am designing a mobile app to work with a site we already have up and running. There are a few things we would like to take advantage of on the phone, however. For example, using the camera to upload photographs to the site.
Currently, I have this code
export default class App extends Component<Props> {
render() {
return (
<WebView
source={{uri: "https://example.com"}}
/>
);
}
}
Is there some way to add a button that lets users open a menu of options that exists on the app alone (and separate from the site in the webview).
I'v tried something like
export default class App extends Component<Props> {
render() {
return (
<View>
<Text>Test</Text>
<WebView
source={{uri: "https://example.com"}}
/>
</View>
);
}
}
just as a test to see if I can add other elements outside the webview, but my app never loads (I just see a blank white screen) when I try this.
The reason that Test and WewbView won't show up in your example code it's because View doesn't have a defined height, you can use flex:1 to give it the entire screen.
See this working sample:
https://snack.expo.io/#cgomezmendez/vengeful-tortillas
import * as React from 'react';
import { Text, View, StyleSheet, WebView } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Test</Text>
<WebView
source={{uri: "https://google.com"}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
You might have a look at this: react-native-webview-bridge
So basically i'm in the process of learning react native. I'm using the react navigation package and I just want to display a simple header title on my stack navigator but the title cuts off. Stack nav title
This is my App.js
import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './screens/HomeScreen'
import DetailsScreen from './screens/DetailsScreen'
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(RootStack)
export default class App extends React.Component {
render(){
return<AppContainer />
}
}
and this is my HomeScreen.js
import React from 'react'
import {Button, View, Text } from 'react-native'
export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screeeen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
)
}
}
It doesnt look like this on my friends phones. I'm using a OnePlus 6 with android 9. They are on older versions of android could that be causing something?
Turns out this is a specific problem affecting OnePlus user who has chosen to use the font OnePlus Slate instead of for exmaple robot. Changing the font in the phone fixes the problem, alternatively you force the usage of a font in the app and it should work as well
I got the same problem running on a OnePlus phone and solved it without the font loader but style with the navigation option in headerTitleStyle width like so:
import { Dimensions } from 'react-native';
const WIDTH = Dimensions.get('window').width;
export const MyStackNav = createStackNavigator(
{
Tab1: {
screen: Tab1,
navigationOptions: ({ navigation }) => ({
headerTitle: `${navigation.state.routeName} page`,
headerTitleStyle: {
width: WIDTH - 75,
},
}),
},
...more code
}
A similar issue also occurs in various components like button in one plus devices. One way to solve it by giving some minimum width to the label style, so that you don't have to switch the font family, helps if you are using some custom fonts
Solution: width: '100%' or some fixed value like minWidth: 100
Code example in drawer navigation
<DrawerItem
labelStyle={{ minWidth: 100 }}
label={`Orders`}
onPress={() => {}}
/>