I use react-native-video-player and I have difficulties with adjusting size of video player, it's too big and doesn't fit into screen and control buttons doesn't fit into available space.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import VideoPlayer from 'react-native-video-player';
export default class VideoPage extends Component {
render() {
return (
<View>
<VideoPlayer
video={{ uri: 'file:///storage/emulated/0/Download/sample_video.mp4' }}
videoWidth={1280}
videoHeight={720}
/>
</View>
);
}
}
Here is what I have now, as you can see this is NOT OK.
I need some help with how to make it smaller. I tried to specify width & height as you can see, but it just doesn't change anything it stays as it is. Maybe there is something I don't know ?
Thank you in advance for any help or suggestions.
set size to your view not your videoplayer and do it by styling.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import VideoPlayer from 'react-native-video-player';
export default class VideoPage extends Component {
render() {
return (
<View style={{width: 1280, height: 720}}>
<VideoPlayer
video={{ uri: 'file:///storage/emulated/0/Download/sample_video.mp4' }}
/>
</View>
);
}
}
Related
I was using react-native-barcode-scanner-google but its not working now.i have two screen on my home page one of them is barcode scanner screen.when i click on barcode screen i got message "unfortunatly the app has stoped".I also try other barcode scanner libraries but not working.Im new to react native,So any help would be highly appreciated.
Sample code
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Alert } from 'react-native';
import BarcodeScanner from 'react-native-barcode-scanner-google';
export default class BarcodeApp extends Component {
render() {
return (
<View style={{flex: 1}}>
<BarcodeScanner
style={{flex: 1}}
onBarcodeRead={({data, type}) => {
// handle your scanned barcodes here!
// as an example, we show an alert:
Alert.alert(`Barcode '${data}' of type '${type}' was scanned.`);
}}
/>
</View>
);
}
}
AppRegistry.registerComponent('BarcodeApp', () => BarcodeApp);
How can we use SafeAreaView in order to display a WebView? I tried this way :
import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {WebView} from 'react-native-webview';
class ChaineYT extends React.Component {
render() {
return (
<SafeAreaView>
<WebView
source={{uri: "someURL"}}
/>
</SafeAreaView>
)
}
}
export default ChaineYT
But it's rendering a white page.
Thanks
You didn't specify the height and width of SafeAreaView.
Change <SafeAreaView> to <SafeAreaView style={{ flex:1 }}>
Official documentation clearly says:
A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
I am trying to load a remote placeholder image. The first image is a local image and loads properly, but not the second image. I am testing this on an android device so I don't think https would cause problems.
Any hints to what I might be doing wrong?
import React, { Component } from 'react';
import { Text, View, Dimensions, TouchableOpacity, Image, ToastAndroid, Animated } from 'react-native';
import styles from "./styles";
class Story extends Component {
constructor(props){
super(props);
this.state={};
}
render() {
return (
<View style={{position:'relative'}}>
<Image source={require('app/assets/images/campus.png')} style={styles.container}></Image>
<Image source={{ uri: 'https://place-hold.it/100x200/fdd.png' }} style={styles.character1}></Image>
</View>
);
}
}
export default Story;
// firstly set isImageload false
then implement image like this
var image= this.state.isImageload ? require('place holder image') : {uri: ImageUrl};
return(
<Image
source={immage}
onLoadStart={() => this.setState({isImageload : true})}
onLoad={() => this.setState({isImageload : false})}
/>
)
I removed one pair bracket from the Image tag and the code become:
<Image source={ uri: 'https://place-hold.it/100x200/fdd.png' } style={styles.character1}></Image>
Please try it to see whether if works.
I made an album that looks sort of like this:
<ScrollView>
<Image1
<Text1>
smth
</Text1> />
<Image2
<Text2>
smthElse
</Text2> />' ... and so on 20 times.
I have 5 albums, which I access with tabs on top.
The problem is that sometimes when I switch between the tabs, some images are blank and don't load. The images are all required like this:
source={require('../assets/Image1.png')}
I want them to be required from the app and not via uri.
I thought the problem is because of the memory and on weaker phones it's possible that they don't always load, because I use a ScrollView and it loads all the images at once. I read that a ListView quite solve my problem, but I can't figure out how to make a ListView that renders 20 specific images with a specific text for each one.
If anyone can give me some clues it would be much appreciated.
Thank you !
In order to use <ListView> You can require all the images on your .js file. On the top of your .js file you can do is
index.js
import React, { Component } from 'react';
import {Listview} from 'react-native'; //Import your other imports ofcourse
// Require all your images here
const image1 = require('../assets/Image1.png')
const image2 = require('../assets/Image2.png')
//.. And so on
export default class ClassName extends Component{
//...
}
Next is create an array object and add it to your constructor on your index.js like so
index.js
import React, { Component } from 'react';
import {Listview} from 'react-native'; //Import your other imports ofcourse
// Require all your images here
const image1 = require('../assets/Image1.png')
const image2 = require('../assets/Image2.png')
var data = [{title:"You image title", image: image1}, {title:"Your Image title",image: image2}]
export default class ClassName extends Component{
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(data),
};
}
}
Next Create a Row.js
Row.js
import React from 'react'
import { StyleSheet, Dimensions, Platform, Image, View, Text } from 'react-native';
const Row = (props) => (
<View style={{flex:1, flexDirection: 'row'}}> //Don't forget this
<Image source={props.image}>
<Text>{props.title}</Text>
</Image>
</View>
)
export default Row
Lastly Import your Row.js file on your index.js and add the <ListView> on your render()
index.js
import React, { Component } from 'react';
import {View,Listview} from 'react-native'; //Import your other imports ofcourse
import Row from './Row'; //If it's on the same folder
// Require all your images here
const image1 = require('../assets/Image1.png')
const image2 = require('../assets/Image2.png')
var data = [{title:"You image title", image: image1}, {title:"Your Image title",image: image2}]
export default class ClassName extends Component{
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(data),
};
}
render(){
<View>
<ListView
style={{flex:1}} //Don't forget this too
dataSource={this.state.dataSource}
renderRow={(data) => <Row {...data} />}
/>
</View>
}
}
Hope this helps you. Cheers!
In response to your question how to use a ListView to render 20 images. We are using a SectionList for rendering multiple photos. I will share the snippets below to get you started.
SectionList
<SectionList
contentContainerStyle={styles.sectionListContainer}
renderItem={this.renderItem}
renderSectionHeader={this.renderHeader}
sections={this.state.ImageData}
/>
this.renderItem
renderItem(data) {
return (
<View key={data.item.key} style={{ flex: 1 }}>
<View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
<Image
style={styles.foodPhoto}
source={{ uri: `data:image/jpg;base64,${data.item.photo}`}}
/>
</View>
</View>
)
}
To format the this.state.ImageData it took us a bit of fiddling to get the formatting/schema right for the SectionList. The format itself is documented at RN documentation. Hope that this helps!
I am fairly new to react native, nativebase, and Exponent. Unfortunately, I am having trouble getting simple components even to display. I've spent probably 6+ hours troubleshooting simple tutorial components from the nativebase documentation. I feel like I'm just missing something fundamental and I would really appreciate a helping hand.
Here's what I'm doing:
Using Exponent XDE to run my project.
Installed nativebase according to the documentation, no errors at this point.
main.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Container } from 'native-base';
import { CardImageExample } from './component/card.js';
AppRegistry.registerComponent('main', () => CardImageExample);
card.js
import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Icon } from 'native-base';
class CardImageExample extends Component {
render() {
return (
<Container>
<Content>
<Card>
<CardItem>
<Thumbnail source={require('./img/penguin-icon.png')} />
<Text>Instrumental Songs</Text>
<Text note>Guitar</Text>
</CardItem>
<CardItem>
<Image style={{ resizeMode: 'cover' }} source={require('./img/penguin.jpg')} />
</CardItem>
<CardItem>
<Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} />
<Text>Listen now</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
export default CardImageExample;
Current error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I just have absolutely no idea where to start. Thanks.
Your main.js should like some thing Like
import * as Exponent from 'exponent';
import React from 'react';
import First from './src/app';
import { Container, Header, Title, Content, Button, Left, Right, Body,Icon, Separator } from 'native-base';
class App extends React.Component {
render() {
return <First / > ;
}
}
Exponent.registerRootComponent(App);
You have to register your app like this Exponent.registerRootComponent(App).
If you are using Exponent.
Example: https://github.com/exponent/nativebase-example