react-native-video crashes application when instantiated - reactjs

Current behavior
When I attempt to invoke the Video library (import { Video } from 'react-native-video') my application breaks with the error of Module AppRegistry is not a registered callable module (calling runApplication)
Reproduction steps
My Video component is as follows:
import React, { Component } from 'react';
import { Video } from 'react-native-video';
import {
View,
Dimensions,
TouchableOpacity,
TouchableWithoutFeedback,
Animated,
Text,
Slider,
NetInfo,
StyleSheet
} from 'react-native';
class VideoPlayer extends Component {
state = {
paused: true
};
render() {
const videoWidth = Dimensions.get('window').width;
const videoHeight = videoWidth * (9 / 16);
const styles = StyleSheet.create({
videoContainer: {
width: videoWidth,
height: videoHeight,
backgroundColor: 'rgb(255,255,255)',
paddingTop: 0
}
})
return (
<Video
source={{ uri: 'https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0' }}
paused={this.state.pause}
style={styles.videoContainer}
/>
)
}
}
export default VideoPlayer;
and App.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Header from './components/Header';
import VideoPlayer from './components/Video';
export default class App extends Component {
render () {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<Header />
</View>
<View style={styles.videoContainer}>
<VideoPlayer />
</View>
<Text style={{color: 'white'}}>Hello Wilbur!</Text>
<Text style={{color: 'white'}}>Some text</Text>
<Text style={{color: 'white'}}>some other text</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
},
headerContainer: {
position: 'absolute',
flex: 1,
top: 0,
height: 72,
alignSelf: 'stretch',
paddingTop: 20,
paddingLeft: 12,
paddingRight: 12,
flexDirection: 'row',
backgroundColor: 'white'
},
videoContainer: {
flex: 0,
backgroundColor: 'rgb(4,4,4)',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 0
}
});
If I do not instantiate the component I can render the application fine, and even make it work with a WebView, however when I attempt to import my VideoPlayer component I receive the aforementioned error.
Expected behavior
A functional video component, or at least an error related to the video player.
Platform
iOS
Video sample
https://www.youtube.com/embed/3NhHqPA8nIs?rel=0&autoplay=0&showinfo=0&controls=0
Does anyone see what I'm doing wrong?
Thank you.

react-native-video does not currently support youtube...
https://github.com/react-native-community/react-native-video/issues/1147

Related

react native text component should not be larger than parent view component

Requirement:
I want to create the link badge.
Here's my code:
import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import {Text, View} from 'react-native';
import HyperLinkIcon from '../../icons/hyperlink-icon';
import RemoveBadgeItemIcon from '../../icons/remove-item-badge-icon';
import {Colors, Typography, Fonts} from '../../theme';
const ItemBadge = ({
url = 'http://www.koovs.com/itemhttp://www.koovs.com/item',
}) => {
return (
<View style={styles.badgeContainer}>
<HyperLinkIcon />
<View style={styles.urlContainerStyle}>
<Text style={styles.urlStyle} numberOfLines={1}>
{url}
</Text>
</View>
<RemoveBadgeItemIcon />
</View>
);
};
export default ItemBadge;
const styles = EStyleSheet.create({
badgeContainer: {
padding: 14,
borderRadius: 12,
backgroundColor: '#F0EFFF',
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden',
},
urlContainerStyle: {
flexGrow: 1,
paddingHorizontal: 14,
},
urlStyle: {
color: Colors.LABEL,
fontSize: Typography._14,
fontFamily: Fonts.ROMAN,
},
});
But this gives me this:
I am trying to make Text component's maxWidth equal to that of its parent View and also if the url is long then it gets ellipsis.
Responsiveness should also be taken into consideration.

Why isn't my ImageBackground the same inside a TouchableOpacity in React Native?

In my app, I have a screen that shows three rows that contain some text and a background image.
I used to only put the image, but I want to be able to press on the images to execute an action. This was my code before and it worked properly :
import React, { Component } from 'react'
import { ScrollView, View } from 'react-native'
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '#react-navigation/native';
import SelectorBox from '../../components/workout/SelectorBox';
const EXERCISE = require('../../assets/workout/exercise.jpg');
const MUSCLES = require('../../assets/workout/muscles.jpg');
const ROUTINE = require('../../assets/workout/routine.jpg');
export default function SelectorScreen() {
const {t} = useTranslation();
const navigation = useNavigation();
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: "blue"}}>
<SelectorBox image={MUSCLES} title={t('workout.muscleGroups')} />
<SelectorBox image={EXERCISE} title={t('workout.exercises')} />
<SelectorBox image={ROUTINE} title={t('workout.routines')} />
</View>
)
}
import React from 'react'
import {Text, View, ImageBackground, StyleSheet, Dimensions} from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
export default function SelectorBox(props) {
return (
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
However, when I change the code, all my SelectorBox disappear...
export default function SelectorBox(props) {
return (
<TouchableWithoutFeedback style={styles.option}>
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
option: {
flex: 1,
width: Dimensions.get('window').width,
// backgroundColor: 'red'
},
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
I would like to be able to keep it like this screenshot everywhere. Right now, the screen is empty. (blue background, this is what i set it to)
Can you guide me ?
Try to debug the issue by steps.
Try and and import TouchableOpacity from react-native instead of react-native-gesture-handler. Does the backgroundColor: 'red' color works if uncomment it from the option style?
Change this:
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
to import from RN:
import { TouchableWithoutFeedback } from 'react-native'
You should consider of using TouchableOpacity instead of TouchableWithoutFeedback:
TouchableWithoutFeedback
Do not use unless you have a very good
reason. All elements that respond to press should have a visual
feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.

flexDirection: "row" not working react-native

I am developing a react-native application. One of the app screens contains a list of albums. I have divided each album container into components which are Card and CardSection.
A Card can contain many CardSections. The CardSection will contain an image and 2 Text titles. The problem I am facing is with the positioning of the content in the CardSection as flexDirection:'row' is not working.
Here is the CardSection.js
import React from 'react';
import {View, Text, Image} from 'react-native';
import Card from './Card';
import CardSection from "./CardSection";
const AlbumDetail = ({album}) => {
// destructing the props
const {title, artist, thumbnail_image} = album;
return (
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: thumbnail_image}} />
</View>
<View style={styles.headerContentStyle} >
<Text style={styles.headerTextStyle}>{title}</Text>
<Text>{artist}</Text>
</View>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTextStyle:{
fontSize:18
},
thumbnailStyle: {
height: 50,
width: 50
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
margin: 10,
marginRight: 10
}
};
export default AlbumDetail;
Here is the CardSection.js
import React from 'react';
import {View} from 'react-native';
const CardSection = (props) => {
return (
<View styles={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: "row",
borderColor: '#ddd',
position: 'relative'
}
};
export default CardSection;
The resultant should that the Image placed towards the left and on the right side of the image there will be 2 Text titles and their flexDirection will be column
<View styles={styles.containerStyle}> you have typo, it is styles, the prop should be style.
use this
headerContentStyle: {
flexDirection: 'row',
justifyContent: 'space-around'
}
instead of
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
}
You have to use card containerStyle props in CardSection.js file.
there you should have to use flexDirection :'row' .
Hope it will work.
I had a similar problem where flexDirection: 'row' was not working in one of my components that I was importing in App.js.
What was causing this was the alignItems: 'center' in the stylesheet for the main container in my App.js file.
I hope this helps someone.
You can check this.
import { TouchableOpacity } from 'react-native'

Creating a Flatlist for a list of components in React Native

I have created a component which itself is composed of several components.Now all these components will get data dynamically and i need to repeat this main component N no of times.Here is the screenshot of the component to be repeated.
The colored panel will have some data and the heading and all text will be updated dynamically.
Here is the code which i have written so far
//FirstScreen.js
import React from 'react';
import { Text, StyleSheet, View, TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import SquareCircle from './Square_circle_Button'
import CirclePlus from './circle_plus'
import DateComponent from './DateComponent'
import LibraryComponent from './LibraryComponent'
class FirstScreen extends React.Component
{
constructor(props)
{
super(props);
}
render() {
return <View style={{ flex: 1, flexDirection: "column" }}>
<DateComponent DateDisplay={this.props.DDate}/>
<View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
<LibraryComponent Heading={this.props.send_heading} DisplayData={this.props.DData}/>
</View>
</View>;
}
}
//LibraryComponent.js
import React from "react";
import { Text, StyleSheet, View, TouchableHighlight } from "react-native";
export default class LibraryComponent extends React.Component
{
render(){
return <View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
<View style={{ flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<Text>{this.props.Heading}</Text>
</View>
<View style={{ flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<Text>{this.props.DisplayData}</Text>
</View>
<View style={{ flex: 4, flexDirection: "row", alignContent: "center", justifyContent: "center" }}>
<View style={{ width: 50, height: 50, backgroundColor: "powderblue" }} />
<View style={{ width: 50, height: 50, backgroundColor: "skyblue" }} />
<View style={{ width: 50, height: 50, backgroundColor: "steelblue" }} />
<View style={{ width: 50, height: 50, backgroundColor: "gray" }} />
</View>
</View>;
}
}
//DateComponent.js
import React from "react";
import { Text, StyleSheet, View, TouchableHighlight } from "react-native";
export default class DateComponent extends React.Component
{
render()
{
return(
<View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
<Text>{this.props.DateDisplay}</Text>
</View>);
}
}
//TimeScroll.js
import React from 'react'
import {FlatList,View} from 'react-native'
import FirstScreen from './FirstScreen'
import CirclePlus from './circle_plus'
import AddCircle from './Square_circle_Button'
export default class Timeline extends React.Component
{
render()
{
return(
<FlatList style={{flex:1}}>
data={[
{key:"20 Mar 2018"},
]}
renderItem={({item}) =><View style={{flex:1}}>
<FirstScreen send_heading={item.key} DData={item.key} DDate={item.key}/>
</View>}
<CirclePlus/>
<AddCircle/>
</FlatList>
);
}
}
If requested,Let me know how should i modify the structure to accomplish this task properly.
You just need to structure your prop data to be an array of objects where each object has the data for each color palette:
//FirstScreen.js
import React from 'react';
import { Text, StyleSheet, View, TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import SquareCircle from './Square_circle_Button'
import CirclePlus from './circle_plus'
import DateComponent from './DateComponent'
import LibraryComponent from './LibraryComponent'
class FirstScreen extends React.Component
{
constructor(props)
{
super(props);
}
renderColorPalettes = () => {
const { colorData } = this.props;
return colorData.map( palette => {
return <LibraryComponent Heading={palette.heading} DisplayData={palette.data}/>
});
};
render() {
const colors = renderColorPalettes();
return <View style={{ flex: 1, flexDirection: "column" }}>
<DateComponent DateDisplay={this.props.DDate}/>
<View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
{colors}
</View>
</View>;
}
}

Vertical button using React Native

I am new to react. I want to create a vertical button using react native. How can I do that? The required image of button is attached for your reference. Any help would be really appreciated.
Here is a simple way to do it using Switch:
(First picture: IOS, Second picture: Android)
import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
state = {
accept: false
}
render() {
return (
<View style={styles.container}>
<View style={{flex: 2, alignItems: "center"}}>
<Text>Turn on the switch when you want to accept work, and turn it off when you dont!</Text>
</View>
<View style={{flex: 1, alignItems: "center"}}>
<Switch
style={styles.verticalSwitch}
value={this.state.accept}
onTintColor="blue"
onValueChange={() => this.setState({accept:!this.state.accept})}
/>
<Text style={{marginTop: 12}}>
{this.state.accept ? "on" : "off"}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
paddingHorizontal: 20,
},
verticalSwitch: {
transform: [{ rotate: '-90deg'}]
}
});

Resources