enter image description here
Its clearly seen in the photo that texts which are "8 Tasks" and "Event" dont start from the same line, and "+" icons dont finish in same line even though I used justify-content:"space-between"
How can I achieve this like I want it to be seen?
Whats my mistake?
Here is the App.js, thanks for your help in advance
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView } from 'react-native';
import Application from "./src/components/icons/application.svg"
import HorizontalCircles from './src/components/HorizontalCircles';
import HorizontalDiscussion from './src/components/HorizontalDiscussion';
import Energy from "./src/components/icons/energy.svg"
import Add from "./src/components/icons/add.svg"
import Calendar from "./src/components/icons/calendar.svg"
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.appIcon}>
<Application height={30} width={22} fill={"#1E2439"} />
<View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
</View>
<TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5"></TextInput>
<View style={{ height: 100 }}>
<ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
<View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
<HorizontalCircles color={"#CFC8FF"} />
<HorizontalCircles color={"#FFA2BF"} />
<HorizontalCircles color={"#FEE3AA"} />
<HorizontalCircles color={"#FEDFCC"} />
<HorizontalCircles color={"#FFA2BF"} />
<HorizontalCircles color={"#F3A5FF"} />
<HorizontalCircles color={"#EFBCFF"} />
<HorizontalCircles color={"#AFBFCF"} />
<HorizontalCircles color={"#AEDF5F"} />
<HorizontalCircles color={"#DDB825"} />
</ScrollView>
</View>
<Text style={styles.blackText}>Group Discussion On Going</Text>
<View style={{ height: 250 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
<HorizontalDiscussion color={"#FFF9F2"} />
<HorizontalDiscussion color={"#E7FBFF"} />
</ScrollView>
</View>
<Text style={styles.blackText}>Todays Task</Text>
<ScrollView>
<View style={{padding:30}}>
<View style={styles.task}>
<View>
<Energy height={35} width={25} fill={"#FB9238"} />
</View>
<View style={{ marginLeft: 15 }}>
<Text style={styles.blackText}>8 Tasks Today</Text>
<Text style={styles.grayText}>Meet them & Share your experience</Text>
</View>
<View style={{ marginLeft: 5 }}>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</View>
<View style={styles.task}>
<View >
<Calendar height={35} width={25} fill={"#FCC626"} />
</View>
<View>
<Text style={styles.blackText}>Event</Text>
<Text style={styles.grayText}>Create & Share Event</Text>
</View>
<View>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: "#FFFFFF",
},
appIcon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
input: {
height: 40,
borderWidth: .5,
borderRadius: 10,
marginVertical: 10,
backgroundColor: "#F7F6F9",
marginVertical: 20,
},
blackText: {
fontSize: 20,
fontWeight: "bold",
fontFamily: "Times New Roman",
},
grayText: {
color: "#A29E97",
fontSize: 17,
},
task: {
flexDirection: "row",
alignItems: "center",
marginBottom: 15,
justifyContent:"space-between"
}
});
export default App;
this screen is after making flex:1
enter image description here
Try this code!! I mean adding the flex:1
<View style={{ marginLeft: 15, flex: 1}}>
<Text style={styles.blackText}>8 Tasks Today</Text>
<Text style={styles.grayText}>Meet them & Share your experience</Text>
</View>
// other style
<View style={{flex: 1, justifyContent: "flex-start"}}>
<Text style={styles.blackText}>Event</Text>
<Text style={styles.grayText}>Create & Share Event</Text>
</View>
Before adding this, all codes were working. But I just wanted to see when I change my Search TextInput, it should be added in Text component.
But I get an error, it says "too many re-renders, React limits the number of renders to prevent an infinitive loop"
What should I change to get this work?
Here is my related code:
MainScreen.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView, TouchableHighlight } from 'react-native';
import Application from "../icons/application.svg"
import HorizontalCircles from '../HorizontalCircles';
import HorizontalDiscussion from "../HorizontalDiscussion";
import Energy from "../icons/energy.svg"
import Add from "../icons/add.svg"
import Calendar from "../icons/calendar.svg"
import Clock from "../icons/clock.svg"
const MainScreen = ({ navigation }) => {
const [text,setText] = useState("");
return (
<SafeAreaView style={styles.container}>
<View style={styles.appIcon}>
<Application height={30} width={22} fill={"#1E2439"} />
<View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
</View>
<TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5">{setText(text)}</TextInput>
<Text>{text}</Text>
<View style={{ height: 100 }}>
<ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
<View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
<HorizontalCircles color={"#CFC8FF"} />
<HorizontalCircles color={"#FFA2BF"} />
<HorizontalCircles color={"#FEE3AA"} />
<HorizontalCircles color={"#FEDFCC"} />
<HorizontalCircles color={"#FFA2BF"} />
<HorizontalCircles color={"#F3A5FF"} />
<HorizontalCircles color={"#EFBCFF"} />
<HorizontalCircles color={"#AFBFCF"} />
<HorizontalCircles color={"#AEDF5F"} />
<HorizontalCircles color={"#DDB825"} />
</ScrollView>
</View>
{/* Discussion Part */}
<Text style={styles.blackText}>Group Discussion On Going</Text>
<View style={{ height: 250 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
<HorizontalDiscussion color={"#FFF9F2"} />
<HorizontalDiscussion color={"#E7FBFF"} />
</ScrollView>
</View>
<Text style={styles.blackText}>Todays Task</Text>
{/* Task Part */}
<ScrollView style={{ height: 300 }}>
<View style={{ padding: 30 }}>
<View style={styles.task}>
<View style={{ backgroundColor:"#FFEFE2", padding:10,borderRadius:13}}>
<Energy height={35} width={25} fill={"#FB9238"} />
</View>
<View style={{ marginLeft: 15, flex: 1}}>
<Text style={styles.blackText}>8 Tasks Today</Text>
<Text style={styles.grayText}>Meet them & Share your experience</Text>
</View>
<View style={{ marginLeft: 5 }}>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</View>
<View style={styles.task}>
<View style={{ backgroundColor: "#FEF8E6", padding: 10, borderRadius: 13 }}>
<Calendar height={35} width={25} fill={"#FCC626"} />
</View>
<View style={{ marginLeft: 15, flex: 1 }}>
<Text style={styles.blackText}>Event</Text>
<Text style={styles.grayText}>Create & Share Event</Text>
</View>
<TouchableHighlight onPress={() => navigation.navigate("NewScreen")}>
<View>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</TouchableHighlight>
</View>
<Text style={styles.blackText}>Proposed classes</Text>
<View>
<Text style={{ color:"#9993D3",fontSize:18}}>Math class</Text>
<View style={styles.proposed}>
<Text style={{ color:"#706E80",fontSize:20}}>Rasyid Hilman</Text>
<View style={{ height: 35, width: 35, backgroundColor: "#FEE3AA", borderRadius: 25, marginHorizontal: 10, }} />
</View>
<View style={styles.proposed}>
<View style={styles.agendaClockSvg}>
<Calendar height={40} width={30} fill={"#D4D3DA"} />
<Text style={{ color: "#B0AFB7", fontSize: 18, marginLeft: 10}}>August 16, 2021</Text>
</View>
<View style={styles.agendaClockSvg}>
<Clock height={40} width={30} fill={"#C0BFC6"} />
<Text style={{ color:"#AFAEB8", fontSize:18, marginLeft:10}}>15:00</Text>
</View>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: "#FFFFFF",
},
appIcon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
input: {
height: 40,
borderWidth: .5,
borderRadius: 10,
marginVertical: 10,
backgroundColor: "#F7F6F9",
marginVertical: 20,
},
blackText: {
fontSize: 20,
fontWeight: "bold",
fontFamily: "Times New Roman",
},
grayText: {
color: "#A29E97",
fontSize: 17,
},
task: {
flexDirection: "row",
alignItems: "center",
marginBottom: 15,
justifyContent: "space-between"
},
proposed: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
agendaClockSvg: {
flexDirection: "row",
alignItems: "center",
}
});
export default MainScreen;
You're calling setText within your render on this line:
<TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5">{setText(text)}</TextInput>
Take a look at the TextInput documentation: https://reactnative.dev/docs/textinput
What you probably want is:
<TextInput
style={styles.input}
onChangeText={setText}
value={text}
placeholder="Search"
placeholderTextColor="#B9B9C5"
/>
I have a textinput. In this textinput, I have a letter "O" as an icon. I want textinput to be clickable when I press on "O" letter, how could i do that?
For now it doesn't work, since i couldnt add this property to that letter. I added how my textinput looks in the app. Thank you in advance.
Here is the App.js
import React, { useState } from 'react';
import { TouchableWithoutFeedback, StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView, TouchableHighlight } from 'react-native';
import Application from "../icons/application.svg"
import HorizontalCircles from '../HorizontalCircles';
import HorizontalDiscussion from "../HorizontalDiscussion";
import Energy from "../icons/energy.svg"
import Add from "../icons/add.svg"
import Calendar from "../icons/calendar.svg"
import Clock from "../icons/clock.svg"
const MainScreen = ({ navigation }) => {
const [text, setText] = useState("");
return (
// for ios, i add safeareview and flex:1, otherwise height doesnt become 100%
<SafeAreaView style={{flex:1,}} >
<View style={styles.container}>
<View style={styles.appIcon}>
<Application height={30} width={22} fill={"#1E2439"} />
<View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
</View>
<View style={[styles.input,{ flexDirection: "row", alignItems: "center" }]}>
<TouchableWithoutFeedback onPress={onfocus(TextInput)}>
<Text style={{ marginLeft: 5 }}>O</Text>
</TouchableWithoutFeedback>
<TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text}></TextInput>
</View>
<Text>{text}</Text>
<View style={{ height: 120 }}>
<ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
<View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
<HorizontalCircles colorFirst={"#CFC8FF"} colorSecond={"#4CC98F"} />
<HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FFD24D"} />
<HorizontalCircles colorFirst={"#FEE3AA"} colorSecond={"#4DC98F"} />
<HorizontalCircles colorFirst={"#FEDFCC"} colorSecond={"#B3C2D8"} />
<HorizontalCircles colorFirst={"#FFA2BF"} colorSecond={"#FF3FFF"} />
<HorizontalCircles colorFirst={"#F3A5FF"} colorSecond={"#1CB28F"} />
<HorizontalCircles colorFirst={"#EFBCFF"} colorSecond={"#22398F"} />
<HorizontalCircles colorFirst={"#AFBFCF"} colorSecond={"#44798F"} />
<HorizontalCircles colorFirst={"#AEDF5F"} colorSecond={"#98C98F"} />
<HorizontalCircles colorFirst={"#DDB825"} colorSecond={"#359424"} />
</ScrollView>
</View>
{/* Discussion Part */}
<Text style={styles.blackText}>Group Discussion On Going</Text>
<View style={{ height: 250 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
<HorizontalDiscussion color={"#FFF9F2"} />
<HorizontalDiscussion color={"#E7FBFF"} />
</ScrollView>
</View>
<Text style={styles.blackText}>Todays Task</Text>
{/* Task Part */}
<ScrollView style={{ height: 300 }}>
<View style={{ padding: 30 }}>
<View style={styles.task}>
<View style={{ backgroundColor: "#FFEFE2", padding: 10, borderRadius: 13 }}>
<Energy height={35} width={25} fill={"#FB9238"} />
</View>
<View style={{ marginLeft: 15, flex: 1 }}>
<Text style={styles.blackText}>8 Tasks Today</Text>
<Text style={styles.grayText}>Meet them & Share your experience</Text>
</View>
<View style={{ marginLeft: 5 }}>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</View>
<View style={styles.task}>
<View style={{ backgroundColor: "#FEF8E6", padding: 10, borderRadius: 13 }}>
<Calendar height={35} width={25} fill={"#FCC626"} />
</View>
<View style={{ marginLeft: 15, flex: 1 }}>
<Text style={styles.blackText}>Event</Text>
<Text style={styles.grayText}>Create & Share Event</Text>
</View>
<TouchableHighlight onPress={() => navigation.navigate("NewScreen")}>
<View>
<Add height={35} width={25} fill={"#ABA8BA"} />
</View>
</TouchableHighlight>
</View>
<Text style={styles.blackText}>Proposed classes</Text>
<View>
<Text style={{ color: "#9993D3", fontSize: 18 }}>Math class</Text>
<View style={styles.proposed}>
<Text style={{ color: "#706E80", fontSize: 20 }}>Rasyid Hilman</Text>
<View style={{ height: 35, width: 35, backgroundColor: "#FEE3AA", borderRadius: 25, marginHorizontal: 10, }} />
</View>
<View style={styles.proposed}>
<View style={styles.agendaClockSvg}>
<Calendar height={40} width={30} fill={"#D4D3DA"} />
<Text style={{ color: "#B0AFB7", fontSize: 18, marginLeft: 10 }}>August 16, 2021</Text>
</View>
<View style={styles.agendaClockSvg}>
<Clock height={40} width={30} fill={"#C0BFC6"} />
<Text style={{ color: "#AFAEB8", fontSize: 18, marginLeft: 10 }}>15:00</Text>
</View>
</View>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: "#FFFFFF",
},
appIcon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
input: {
height: 40,
borderWidth: .5,
borderRadius: 10,
marginVertical: 10,
backgroundColor: "#F7F6F9",
marginVertical: 20,
},
blackText: {
fontSize: 20,
fontWeight: "bold",
},
grayText: {
color: "#A29E97",
fontSize: 17,
},
task: {
flexDirection: "row",
alignItems: "center",
marginBottom: 15,
justifyContent: "space-between"
},
proposed: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
agendaClockSvg: {
flexDirection: "row",
alignItems: "center",
}
});
export default MainScreen;
Here is my textinput:
You can use the useRef hooks from react to focus any element. You just have to create a new Ref and then assign it to <TextInput /> and onPress on any element you can just focus that input ref using inputRef.current.focus()
const MainScreen = ({ navigation }) => {
const inputRef = useRef();
const [text, setText] = useState("");
...
...
<TouchableWithoutFeedback onPress={() => {inputRef.current.focus()}}>
<Text style={{ marginRight: 25 }}>O</Text>
</TouchableWithoutFeedback>
<TextInput style={{ flex: 1 }} placeholder="Search" placeholderTextColor="#B9B9C5" onChangeText={setText} value={text} ref={inputRef}></TextInput>
...
I have added searchview then another row below that and then i have added flatlist in my view below the horizontal listview and i want to show it in full remaining height but it is not showing, there is also not any error in the code and also it doesn't show any error in console, here is a code :
<View style={styles.mainContainer}>
<View style={styles.searchView}>
<TextInput
style={styles.searchInput}
onChangeText={text => this.SearchFilterFunction(text)}
value={this.state.searchText}
underlineColorAndroid="transparent"
placeholder="Search Services"
placeholderTextColor={theme.colors.app_blue_light}
/>
<Image source={Images.search} style={styles.searchImage} />
</View>
{/* MapView */}
<View style={styles.MapToggleContainer}>
<Text style={styles.titleShop}>Select your shop</Text>
<Text style={styles.titleToggle}
onPress={this.toggleView}>List View</Text>
</View>
<View style={styles.shopListView}>
<FlatList
horizontal
style={styles.shopsList}
data={this.state.data}
renderItem={({ item: rowData }) => {
return (
<View style={styles.shopListItem}>
<Image source={require('./logo.png')} style={styles.shopImage} />
</View>
);
}}
keyExtractor={(item, index) => index}
/>
</View>
<MapboxGL.MapView>
<MapboxGL.Camera centerCoordinate={this.state.coordinates[0]} zoomLevel={14} />
<MapboxGL.MarkerView id='marker1' coordinate={this.state.coordinates[0]}>
<ImageBackground source={require('./chat.png')}
style={{ borderColor: 'black', borderWidth: 0, width: 80, height: 80, alignContent: 'center' }}>
<TouchableOpacity style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}
onPress={() => {
this.setState({ toolTipVisible: true })
}}>
<Tooltip
animated
isVisible={this.state.toolTipVisible}
content={<View style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>
<View style={{ flexDirection: 'row' }}>
<Image source={require('./chat.png')} />
<View style={{ flexDirection: 'column' }}>
<Text style={{ marginHorizontal: 10, marginTop: 10 }}>123, Main st,</Text>
<Text style={{ marginHorizontal: 10, marginBottom: 10 }}>Chicago, IL 6061</Text>
</View>
</View>
<TouchableOpacity
style={{ backgroundColor: 'orange', margin: 10, alignItems: 'center' }}
onPress={() => { }}
>
<Text style={{ margin: 10, color: 'white' }}>Select Shop</Text>
</TouchableOpacity>
</View>}
placement="top"
onClose={() => this.setState({ toolTipVisible: false })} >
<Text style={{ color: 'white', fontWeight: 'bold', fontSize: 20 }} >$50.00</Text>
</Tooltip>
</TouchableOpacity>
</ImageBackground>
</MapboxGL.MarkerView>
</MapboxGL.MapView>
</View>
Styles
mainContainer: {
flex: 1,
backgroundColor: theme.colors.white
},
toggleContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '20#ms',
marginBottom:'10#ms',
marginHorizontal: '15#ms',
},
titleShop: {
fontFamily: 'Muli-Bold',
fontSize: '16#ms',
color: theme.colors.gray4
},
titleToggle: {
fontFamily: 'Muli-Bold',
fontSize: '11#ms',
color: theme.colors.gray4,
textDecorationLine: 'underline',
alignSelf:'center'
},
MapToggleContainer:{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '10#ms',
marginBottom:'15#ms',
marginHorizontal: '15#ms',
},
shopListView:{
height:'60#ms'
},
shopsList:{
marginLeft:'5#ms',
marginRight:'15#ms',
},
shopListItem:{
elevation:5,
backgroundColor:'white',
marginLeft:'10#ms',
height:'50#ms',
width:'50#ms',
alignItems:'center',
justifyContent:'center',
borderRadius:'5#ms'
},
shopImage:{
width:'30#ms',
height:'30#ms',
},
And here is a result, as you can see the mapview below list is not visible
give height and width style to MapboxGL.MapView
<MapboxGL.MapView style={{width:Dimensions.get("window").width,height:400}}>
How can i play youtube video on react-native-video,
i don't want to play video in react-native-youtube or in webview,
Another option that I have checked and used is the WebView. To use it make sure you put the component in a View with a flex. Ex:
<View style={{flex: 1}}>
<WebView
style={ { marginTop: (Platform.OS == 'ios') ? 20 : 0,} }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/'+this.state.pictureData.idVideo }}
/>
</View>
in my case, what I did was to obtain the identifying part of the YouTube video that would be for example: https://www.youtube.com/watch?v=KQ6zr6kCPj8
this.state.pictureData.idVideo would contain only: KQ6zr6kCPj8
To use it install:
$ npm install --save react-native-webview
link react-native-webview
and if you want more information:
https://github.com/react-native-community/react-native-webview
react-native-video does not support YouTube playback. This is something we have been investigating in our own projects. While it will support playback of Vimeo pro videos due to the direct HLS and MP4 files being exposed, YouTube does not provide this reliably. It used to be sometimes possible to get the direct video URL from some YouTube videos but that is not reliable anymore and might not even be possible with the latest API.
Currently, we have been dumping out to the YouTube app or the YouTube site in order to avoid having to implement the official react-native-youtube repository, but we will be eventually integrating with that repo in order to provide a more seamless user experience.
I understand that you don't want to use this solution, but, unfortunately, using react-native-video is not an option for you for this issue right now, and likely never will be. See this SO question for more.
A solution to your question is to use react-native youtube.
react-native-youtube
Here is an example I tried :
import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView, TouchableOpacity, PixelRatio, Platform, Button, Dimensions, } from 'react-native';
import YouTube, { YouTubeStandaloneIOS, YouTubeStandaloneAndroid } from 'react-native-youtube';
export default class YouTubeExample extends Component {
state = {
isReady: false,
status: null,
quality: null,
error: null,
isPlaying: true,
isLooping: true,
duration: 0,
currentTime: 0,
fullscreen: false,
playerWidth: Dimensions.get('window').width,
};
constructor(props){
super(props);
}
_youTubeRef = React.createRef();
render(){
const YOUR_API_KEY = "paste yout api key here";
return (<View>
<ScrollView style={styles.container}>
<Text style={styles.welcome}>{'<YouTube /> component for React Native.'} </Text>
<YouTube
ref={this._youTubeRef}
// You must have an API Key for the player to load in Android
apiKey = {YOUR_API_KEY}
// Un-comment one of videoId / videoIds / playlist.
// You can also edit these props while Hot-Loading in development mode to see how
// it affects the loaded native module
//videoId="ncw4ISEU5ik"
// videoIds={['uMK0prafzw0', 'qzYgSecGQww', 'XXlZfc1TrD0', 'czcjU1w-c6k']}
playlistId="PL3c6c2pNE7cLc5a0zpz7xZOW38H7lzzKM"
play={this.state.isPlaying}
loop={this.state.isLooping}
fullscreen={this.state.fullscreen}
controls={1}
style={[
{ height: PixelRatio.roundToNearestPixel(this.state.playerWidth / (16 / 9)) },
styles.player,
]}
onError={e => {
this.setState({ error: e.error });
}}
onReady={e => {
this.setState({ isReady: true });
}}
onChangeState={e => {
this.setState({ status: e.state });
}}
onChangeQuality={e => {
this.setState({ quality: e.quality });
}}
onChangeFullscreen={e => {
this.setState({ fullscreen: e.isFullscreen });
}}
onProgress={e => {
this.setState({ currentTime: e.currentTime });
}}
/>
{/* Playing / Looping */}
<View style={styles.buttonGroup}>
<Button
title={this.state.status == 'playing' ? 'Pause' : 'Play'}
color={this.state.status == 'playing' ? 'red' : undefined}
onPress={() => {
this.setState(state => ({ isPlaying: !state.isPlaying }));
}}
/>
<Text> </Text>
<Button
title={this.state.isLooping ? 'Looping' : 'Not Looping'}
color={this.state.isLooping ? 'green' : undefined}
onPress={() => {
this.setState(state => ({ isLooping: !state.isLooping }));
}}
/>
</View>
{/* Previous / Next video */}
<View style={styles.buttonGroup}>
<Button
title="Previous Video"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.previousVideo();
}
}}
/>
<Text> </Text>
<Button
title="Next Video"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.nextVideo();
}
}}
/>
</View>
{/* Go To Specific time in played video with seekTo() */}
<View style={styles.buttonGroup}>
<Button
title="15 Seconds"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.seekTo(15);
}
}}
/>
<Text> </Text>
<Button
title="2 Minutes"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.seekTo(2 * 60);
}
}}
/>
<Text> </Text>
<Button
title="15 Minutes"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.seekTo(15 * 60);
}
}}
/>
</View>
{/* Play specific video in a videoIds array by index */}
{this._youTubeRef.current &&
this._youTubeRef.current.props.videoIds &&
Array.isArray(this._youTubeRef.current.props.videoIds) && (
<View style={styles.buttonGroup}>
{this._youTubeRef.current.props.videoIds.map((videoId, i) => (
<React.Fragment key={i}>
<Button
title={`Video ${i}`}
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.playVideoAt(i);
}
}}
/>
<Text> </Text>
</React.Fragment>
))}
</View>
)}
{/* Get current played video's position index when playing videoIds (and playlist in iOS) */}
<View style={styles.buttonGroup}>
<Button
title={'Get Videos Index: ' + this.state.videosIndex}
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current
.getVideosIndex()
.then(index => this.setState({ videosIndex: index }))
.catch(errorMessage => this.setState({ error: errorMessage }));
}
}}
/>
</View>
{/* Fullscreen */}
{!this.state.fullscreen && (
<View style={styles.buttonGroup}>
<Button
title="Set Fullscreen"
onPress={() => {
this.setState({ fullscreen: true });
}}
/>
</View>
)}
{/* Get Duration (iOS) */}
{Platform.OS === 'ios' && (
<View style={styles.buttonGroup}>
<Button
title="Get Duration (iOS)"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current
.getDuration()
.then(duration => this.setState({ duration }))
.catch(errorMessage => this.setState({ error: errorMessage }));
}
}}
/>
</View>
)}
{/* Get Progress & Duration (Android) */}
{Platform.OS === 'android' && (
<View style={styles.buttonGroup}>
<Button
title="Get Progress & Duration (Android)"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current
.getCurrentTime()
.then(currentTime => this.setState({ currentTime }))
.catch(errorMessage => this.setState({ error: errorMessage }));
this._youTubeRef.current
.getDuration()
.then(duration => this.setState({ duration }))
.catch(errorMessage => this.setState({ error: errorMessage }));
}
}}
/>
</View>
)}
{/* Standalone Player (iOS) */}
{Platform.OS === 'ios' && YouTubeStandaloneIOS && (
<View style={styles.buttonGroup}>
<Button
title="Launch Standalone Player"
onPress={() => {
YouTubeStandaloneIOS.playVideo('KVZ-P-ZI6W4')
.then(() => console.log('iOS Standalone Player Finished'))
.catch(errorMessage => this.setState({ error: errorMessage }));
}}
/>
</View>
)}
{/* Standalone Player (Android) */}
{Platform.OS === 'android' && YouTubeStandaloneAndroid && (
<View style={styles.buttonGroup}>
<Button
style={styles.button}
title="Standalone: One Video"
onPress={() => {
YouTubeStandaloneAndroid.playVideo({
apiKey: 'YOUR_API_KEY',
videoId: 'KVZ-P-ZI6W4',
autoplay: true,
lightboxMode: false,
startTime: 124.5,
})
.then(() => {
console.log('Android Standalone Player Finished');
})
.catch(errorMessage => {
this.setState({ error: errorMessage });
});
}}
/>
<Text> </Text>
<Button
title="Videos"
onPress={() => {
YouTubeStandaloneAndroid.playVideos({
apiKey: 'YOUR_API_KEY',
videoIds: ['HcXNPI-IPPM', 'XXlZfc1TrD0', 'czcjU1w-c6k', 'uMK0prafzw0'],
autoplay: false,
lightboxMode: true,
startIndex: 1,
startTime: 99.5,
})
.then(() => {
console.log('Android Standalone Player Finished');
})
.catch(errorMessage => {
this.setState({ error: errorMessage });
});
}}
/>
<Text> </Text>
<Button
title="Playlist"
onPress={() => {
YouTubeStandaloneAndroid.playPlaylist({
apiKey: 'YOUR_API_KEY',
playlistId: 'PLF797E961509B4EB5',
autoplay: false,
lightboxMode: false,
startIndex: 2,
startTime: 100.5,
})
.then(() => {
console.log('Android Standalone Player Finished');
})
.catch(errorMessage => {
this.setState({ error: errorMessage });
});
}}
/>
</View>
)}
{/* Reload iFrame for updated props (Only needed for iOS) */}
{Platform.OS === 'ios' && (
<View style={styles.buttonGroup}>
<Button
title="Reload iFrame (iOS)"
onPress={() => {
if (this._youTubeRef.current) {
this._youTubeRef.current.reloadIframe();
}
}}
/>
</View>
)}
<Text style={styles.instructions}>
{this.state.isReady ? 'Player is ready' : 'Player setting up...'}
</Text>
<Text style={styles.instructions}>Status: {this.state.status}</Text>
<Text style={styles.instructions}>Quality: {this.state.quality}</Text>
{/* Show Progress */}
<Text style={styles.instructions}>
Progress: {Math.trunc(this.state.currentTime)}s ({Math.trunc(this.state.duration / 60)}:
{Math.trunc(this.state.duration % 60)}s)
{Platform.OS !== 'ios' && <Text> (Click Update Progress & Duration)</Text>}
</Text>
<Text style={styles.instructions}>
{this.state.error ? 'Error: ' + this.state.error : ''}
</Text>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'grey',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
buttonGroup: {
flexDirection: 'row',
alignSelf: 'center',
paddingBottom: 5,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
player: {
alignSelf: 'stretch',
marginVertical: 10,
},
});
For the API Key, follow this link :
API Key
You have the id of the playlist in the address :
Install the component like this :
npm install react-native-youtube -S
I had errors with '#Nullable', if you have the same problem, go to
node_modules\react-native-youtube\android\build.gradle
and in 'dependencies' section, add this line :
implementation 'androidx.annotation:annotation:1.1.0'
Maybe you'll need to clean gradle:
cd android
gradlew clean (or .\gradlew clean)
This is a snapshot of my actual android emulator :
React native video doesn't have the feature to play a youtube video for that you have to use external libraries as mentioned above like webView or react native youtube.
I personally used Youtube Iframe Visit https://www.npmjs.com/package/react-native-youtube-iframe, it is a much newer library compared to others and has some wonderful features like you can hide controls and also alter the state of the displayed video
I have listed the code example below on how to use it in your component(functional).
import React, { useState, useCallback } from "react";
import { View, Text, SafeAreaView, TouchableOpacity, Image, ScrollView,
StatusBar, StyleSheet, Button, Linking } from 'react-native';
import { scale, verticalScale, moderateScale, scaleFont, fullHeight,
fullWidth, constants, colors } from './utils'
import Video from 'react-native-video';
import YoutubePlayer from "react-native-youtube-iframe";
import Modal from "react-native-modal";
import { Mute, Unmute, DashBoardLogo, Truck, Gift, MMtLogo } from "./assets/images";
const Dashboard = (props) => {
const [mute, setMute] = useState(true);
const video = require('./assets/Video/video.mp4')
const [mute2, setMute2] = useState(false);
const [isVisible, setisvisible] = useState(false)
const togglemute = useCallback(() => {
setMute((prev) => !prev);
}, [])
const togglemute2 = useCallback(() => {
setMute2((prev) => !prev);
}, [])
return (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<SafeAreaView style={{ flex: 0, backgroundColor: '#fff' }} />
<StatusBar
hidden={false} translucent={false}
networkActivityIndicatorVisible={true}
backgroundColor={"#fff"}
barStyle={"dark-content"}
/>
<Modal
deviceHeight={fullHeight}
deviceWidth={fullWidth}
isVisible={isVisible}
animationIn="slideInRight"
animationOut="slideOutRight"
><SafeAreaView style={{ flex: 0, backgroundColor: '#fff' }} />
<StatusBar
hidden={false} translucent={false}
networkActivityIndicatorVisible={true}
backgroundColor={"#fff"}
barStyle={"dark-content"}
/>
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1, backgroundColor: '#fff', width: fullWidth, alignSelf: 'center', height: fullHeight, position: 'absolute' }}>
<TouchableOpacity onPress={() => setisvisible(false)} >
<Text style={{ color: 'red', alignSelf: 'center', fontWeight: '700', marginTop: verticalScale(20), fontSize: scaleFont(24), width: scale(100), textAlign: 'center' }}>Close</Text>
</TouchableOpacity>
<Text style={{ color: '#000', fontSize: scaleFont(20), fontWeight: '600', marginLeft: scale(20), marginTop: verticalScale(30) }} >Libraries Used:</Text>
<View style={{ flexDirection: 'row', width: scale(340), alignSelf: 'center' }}>
<View style={{ color: 'grey', marginTop: verticalScale(10) }} >
<Text style={{ color: 'grey' }} >react-native-youtube-iframe</Text>
<Text style={{ color: 'grey' }} >react-native-video</Text>
<Text style={{ color: 'grey' }} >react-native-modal </Text>
<Text style={{ color: 'grey' }} >react-native-svg and</Text>
<Text style={{ color: 'grey' }} >react-native-svg-transformer</Text>
</View>
<View style={{ color: 'grey', marginTop: verticalScale(10) }} >
<Text style={{ color: 'grey' }} > : To play the first video</Text>
<Text style={{ color: 'grey' }} > : To play the second video</Text>
<Text style={{ color: 'grey' }} > : For Showing this modal</Text>
<Text style={{ color: 'grey', }} > : To use svg images for</Text>
<Text style={{ color: 'grey', }} > better clarity</Text>
</View>
</View>
<View style={{ width: scale(330), alignSelf: 'center' }}>
<Text style={{ color: '#000', fontSize: scaleFont(20), fontWeight: '600', marginTop: verticalScale(30) }} >Description</Text>
<Text style={{ color: 'grey', width: scale(330), alignSelf: 'center' }} >This project is designed using react-native --version 0.68, I have a two seperate cards to play the videos, the first video is being played using youtube Iframe , the second video is present in the local file and being played through the react-native-video library, also used svg libraries to enhance the quality of icons and images used in the project</Text>
</View>
<View style={{ width: scale(330), alignSelf: 'center', }}>
<Text style={{ color: 'red', fontSize: scaleFont(20), fontWeight: '600', marginTop: verticalScale(30) }} >Note</Text>
<Text style={{ color: 'grey', }} >I have tried to make the functionalities similar to the figma file but for any sugesstion or review please feel free to contact me at <Text onPress={() => Linking.openURL('mailto:hpratap97#gmail.com')} style={{ color: colors.primary }} >hpratap97#gmail.com</Text>, <Text style={{ color: '#000', fontWeight: '700' }}>8958460383</Text></Text>
</View>
<View style={{ alignSelf: 'center', width: scale(330), marginTop: verticalScale(50), marginBottom: verticalScale(100) }}>
<Text style={{ color: '#000', fontSize: scale(20), marginTop: verticalScale(30), fontWeight: '700' }}>Regards,</Text>
<Text style={{ color: '#000' }}>Harsh Pratap Singh</Text>
</View>
</ScrollView>
</Modal >
<ScrollView overScrollMode="never">
<View style={{}}>
{/* Header */}
<View style={{ alignSelf: 'center', flexDirection: 'row', justifyContent: "space-between", alignItems: 'center', width: scale(329), height: verticalScale(47.96), marginTop: verticalScale(10) }}>
<View>
<Text style={{
fontSize: scaleFont(12), fontWeight: "500", color: 'rgba(17, 20, 45, 0.65)'
}}>
Welcome Back
</Text>
<Text style={{
fontSize: scaleFont(24), fontWeight: "600", color: '#11142D'
}}
>
Rahul Kumar
</Text>
</View>
<TouchableOpacity
onPress={() => setisvisible(true)}
style={{
width: verticalScale(38), height: verticalScale(38), borderRadius: verticalScale(100), shadowColor: 'green', shadowOffset: { width: 0.25, height: 0.25 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 4, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center',
}}>
<DashBoardLogo />
</TouchableOpacity>
</View>
{/* First Card */}
<View style={{ width: scale(332), height: verticalScale(480.29), marginTop: verticalScale(28.72), borderRadius: verticalScale(17), alignSelf: 'center', shadowColor: colors.shadowColor, shadowOffset: { width: 0, height: 0.25 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 4, backgroundColor: '#fff', }}>
<View style={{ height: verticalScale(255), backgroundColor: '#000', borderTopLeftRadius: verticalScale(17.71), borderTopRightRadius: verticalScale(17.71), justifyContent: 'center', alignItems: 'center' }}>
<YoutubePlayer
height={verticalScale(255)}
width={scale(320)}
play={true}
playList={["kV__iZuxDGE"]}
mute={mute}
initialPlayerParams={{ controls: false, loop: true, rel: false, iv_load_policy: 3 }}
/>
{
mute ? (<TouchableOpacity
activeOpacity={1}
onPress={togglemute}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}>
<Mute />
</TouchableOpacity>) : (<TouchableOpacity
onPress={togglemute}
activeOpacity={1}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}
>
<Unmute />
</TouchableOpacity>)
}
</View>
<View>
<Text
style={{ marginTop: verticalScale(13.68), fontSize: scaleFont(12), color: '#6F767E', fontWeight: "600", marginLeft: scale(19) }}
>
IPHONE SAVINGS PLAN
</Text>
<Text style={{ fontSize: scaleFont(23), fontWeight: '700', marginTop: verticalScale(5.5), width: scale(290), color: '#001B19', marginLeft: scale(19), }}>
Save up for the next iPhone and <Text style={{ color: 'green' }}>get 10% Cashback!</Text>
</Text>
<View style={{ flexDirection: 'row', alignSelf: 'center', marginTop: verticalScale(14.11), alignItems: 'center', justifyContent: 'space-between', width: scale(293.27) }}>
<View>
<TouchableOpacity style={{
width: scale(79.26), height: verticalScale(59.45), backgroundColor: 'rgba(239, 239, 239, 1)', borderRadius: verticalScale(4), justifyContent: 'center', alignItems: 'center'
}}>
<Truck />
</TouchableOpacity>
<Text style={{ alignSelf: 'center', fontSize: scaleFont(10), fontWeight: '600', color: 'rgba(0, 0, 0, 0.5)' }}>Priority Delivery</Text>
</View>
<View>
<TouchableOpacity style={{
width: scale(79.26), height: verticalScale(59.45), backgroundColor: 'rgba(239, 239, 239, 1)', borderRadius: verticalScale(4), justifyContent: 'center', alignItems: 'center'
}}>
<Image source={require('./assets/images/Charger1.png')} style={{ marginTop: verticalScale(6) }} />
</TouchableOpacity>
<Text style={{ alignSelf: 'center', fontSize: scaleFont(10), fontWeight: '600', color: 'rgba(0, 0, 0, 0.5)' }}>Free Charger</Text>
</View>
<View>
<TouchableOpacity style={{
width: scale(79.26), height: verticalScale(59.45), backgroundColor: 'rgba(239, 239, 239, 1)', borderRadius: verticalScale(4), justifyContent: 'center', alignItems: 'center'
}}>
<Gift />
</TouchableOpacity>
<Text style={{ alignSelf: 'center', fontSize: scaleFont(10), fontWeight: '600', color: 'rgba(0, 0, 0, 0.5)' }}>Tortoise Merch</Text>
</View>
</View>
</View>
</View>
{/* Second Card */}
<View style={{ width: scale(332), height: verticalScale(531), marginTop: verticalScale(28.72), borderRadius: verticalScale(17), alignSelf: 'center', shadowColor: colors.shadowColor, shadowOffset: { width: 0, height: 0.25 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 4, backgroundColor: '#fff', marginBottom: verticalScale(100) }}>
<View style={{ height: verticalScale(420), borderTopLeftRadius: verticalScale(17), borderTopRightRadius: verticalScale(17), }}>
<Video source={video}
play={true}
repeat={true}
style={{ height: verticalScale(415), borderTopLeftRadius: verticalScale(17), borderTopRightRadius: verticalScale(17) }}
/>
{
mute2 ? (<TouchableOpacity
activeOpacity={1}
onPress={togglemute2}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}>
<Mute />
</TouchableOpacity>) : (<TouchableOpacity
onPress={togglemute2}
activeOpacity={1}
style={{
width: scale(49),
height: verticalScale(31),
backgroundColor: 'grey',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
marginTop: verticalScale(-40),
marginRight: scale(11),
borderRadius: verticalScale(6),
}}
>
<Unmute />
</TouchableOpacity>)
}
<MMtLogo style={{ marginTop: verticalScale(-55), marginLeft: scale(18) }} />
</View>
<View>
<Text
style={{ marginTop: verticalScale(13.68), fontSize: scaleFont(12), color: '#6F767E', fontWeight: "600", marginLeft: scale(19) }}
>
MAKE MY TRIP SAVINGS PLAN
</Text>
<Text style={{ fontSize: scaleFont(20), fontWeight: '700', marginTop: verticalScale(5.5), width: scale(290), color: '#001B19', marginLeft: scale(19), }}>
Save up for the next Vacation and <Text style={{ color: 'green' }}>get 10% Cashback!</Text>
</Text>
</View>
</View>
</View>
</ScrollView>
</View >
);
}
export default Dashboard;
But if still you doesn't want to use any library and use the react native video component then you have to host your videos on a different server to use them in your application
You can't play Youtube video with react-native-video module. It is not supported at this moment and never was. Also it doesn't seem to be in their roadmap. So you should discuss other options and i recommend latest version of react-native-webview. I have tested it myself and works great. Especially i love the thing that they added fullscreen mode for android.
Well, I haven't tried it yet, but I will need it in my project. As I read there is a package called: react-native-youtube
Here some information about the package: https://www.npmjs.com/package/react-native-youtube
If you wait for tomorrow I check and I tell you, if you do and I left if you could tell how it went ... ^^