[shubham-akole]

please help me to solve this error

Originally posted by @Waqas-Jani in #1 (comment)

[Waqas-Jani]

Strings must be in Text components

…

On Tue, 30 Apr 2019, 11:02 a.m. shubham-akole, ***@***.***> wrote: [image: screenshot from 2018-10-21 12-28-54] <https://user-images.githubusercontent.com/38995824/47264270-017cc980-d52d-11e8-8d46-976f8ad7e11f.png> please help me to solve this error *Originally posted by @Waqas-Jani <https://github.com/Waqas-Jani> in #1 (comment) <#1 (comment)>* — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJJQO4E3Y4HTNB2KKOOB2STPS7OG7ANCNFSM4HJIWUOQ> .

[shubham-akole]

react native is new for me so where i pass string .can you elaborate.

[Waqas-Jani]

Your code screenshort

…

On Tue, 30 Apr 2019, 1:12 p.m. shubham-akole, ***@***.***> wrote: react native is new for me so where i pass string .can you elaborate. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJJQO4F7LR3STQH3TBSNNHTPS75O7ANCNFSM4HJIWUOQ> .

[shubham-akole]

seekbar.js:-
import React, { Component } from 'react';

import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
} from 'react-native';

var Slider = require('react-native-slider');

function pad(n, width, z=0) {
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

const minutesAndSeconds = (position) => ([
pad(Math.floor(position / 60), 2),
pad(position % 60, 2),
]);

const SeekBar = ({
trackLength,
currentPosition,
onSeek,
onSlidingStart,
}) => {
const elapsed = minutesAndSeconds(currentPosition);
const remaining = minutesAndSeconds(trackLength - currentPosition);

return (

<View style={{flexDirection: 'row'}}>

{elapsed[0] + ":" + elapsed[1]}

<View style={{flex: 1}} />
<Text style={[styles.text, {width: 40}]}>
{trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]}


<Slider
maximumValue={Math.max(trackLength, 1, currentPosition + 1)}
onSlidingStart={onSlidingStart}
onSlidingComplete={onSeek}
value={currentPosition}
style={styles.slider}
minimumTrackTintColor='#fff'
maximumTrackTintColor='rgba(255, 255, 255, 0.14)'
thumbStyle={styles.thumb}
trackStyle={styles.track}/>
{/* <Slider
value={this.state.value}
onValueChange={(value) => this.setState({value})} /> */}

);
};

export default SeekBar;

const styles = StyleSheet.create({
slider: {
marginTop: -12,
},
container: {
paddingLeft: 16,
paddingRight: 16,
paddingTop: 16,
},
track: {
height: 2,
borderRadius: 1,
},
thumb: {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'white',
},
text: {
color: 'rgba(255, 255, 255, 0.72)',
fontSize: 12,
textAlign:'center',
}
});

player.js:-

import React, { Component } from 'react';
import {
View,
Text,
StatusBar,
} from 'react-native';
import Header from './Header';
import AlbumArt from './AlbumArt';
import TrackDetails from './TrackDetails';
import SeekBar from './SeekBar';
import Controls from './Controls';
import Video from 'react-native-video';

export default class Player extends Component {
constructor(props) {
super(props);

this.state = {
  paused: true,
  totalLength: 1,
  currentPosition: 0,
  selectedTrack: 0,
  repeatOn: false,
  shuffleOn: false,
};

}

setDuration(data) {
// console.log(totalLength);
this.setState({totalLength: Math.floor(data.duration)});
}

setTime(data) {
//console.log(data);
this.setState({currentPosition: Math.floor(data.currentTime)});
}

seek(time) {
alert("data"+JSON.stringify(time))
return null
time = Math.round(time);
this.refs.audioElement && this.refs.audioElement.seek(time);
this.setState({
currentPosition: time,
paused: false,
});
}

onBack() {
if (this.state.currentPosition < 10 && this.state.selectedTrack > 0) {
this.refs.audioElement && this.refs.audioElement.seek(0);
this.setState({ isChanging: true });
setTimeout(() => this.setState({
currentPosition: 0,
paused: false,
totalLength: 1,
isChanging: false,
selectedTrack: this.state.selectedTrack - 1,
}), 0);
} else {
this.refs.audioElement.seek(0);
this.setState({
currentPosition: 0,
});
}
}

onForward() {
if (this.state.selectedTrack < this.props.tracks.length - 1) {
this.refs.audioElement && this.refs.audioElement.seek(0);
this.setState({ isChanging: true });
setTimeout(() => this.setState({
currentPosition: 0,
totalLength: 1,
paused: false,
isChanging: false,
selectedTrack: this.state.selectedTrack + 1,
}), 0);
}
}

render() {

const track = this.props.tracks[this.state.selectedTrack];

const video = this.state.isChanging ? null : (
  <Video source={{uri: track.audioUrl}} // Can be a URL or a local file.
    ref="audioElement"
    paused={this.state.paused}               // Pauses playback entirely.
    resizeMode="cover"           // Fill the whole screen at aspect ratio.
    repeat={true}                // Repeat forever.
    onLoadStart={this.loadStart} // Callback when video starts to load
    onLoad={this.setDuration.bind(this)}    // Callback when video loads
    onProgress={this.setTime.bind(this)}    // Callback every ~250ms with currentTime
    onEnd={this.onEnd}           // Callback when playback finishes
    onError={this.videoError}    // Callback when video cannot be loaded
    style={styles.audioElement} />
);

return (
  <View style={styles.container}>
    <StatusBar hidden={true} />
    <Header message="Playing From Charts" />
    <AlbumArt url={track.albumArtUrl} />
    <TrackDetails title={track.title} artist={track.artist} />
    <SeekBar
      onSeek={this.seek.bind(this)}
      trackLength={this.state.totalLength}
      onSlidingStart={() => this.setState({paused: true})}
      currentPosition={this.state.currentPosition} />
    <Controls
      onPressRepeat={() => this.setState({repeatOn : !this.state.repeatOn})}
      repeatOn={this.state.repeatOn}
      shuffleOn={this.state.shuffleOn}
      forwardDisabled={this.state.selectedTrack === this.props.tracks.length - 1}
      onPressShuffle={() => this.setState({shuffleOn: !this.state.shuffleOn})}
      onPressPlay={() => this.setState({paused: false})}
      onPressPause={() => this.setState({paused: true})}
      onBack={this.onBack.bind(this)}
      onForward={this.onForward.bind(this)}
      paused={this.state.paused}/>
    {video}
  </View>
);

}
}

const styles = {
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
},
audioElement: {
height: 0,
width: 0,
}
};

[Waqas-Jani]

Use react native own slider instead react-native-slider ,,

…

On Tue, 30 Apr 2019, 2:24 p.m. shubham-akole, ***@***.***> wrote: seekbar.js:- import React, { Component } from 'react'; import { View, Text, StyleSheet, Image, TouchableOpacity, } from 'react-native'; var Slider = require('react-native-slider'); function pad(n, width, z=0) { n = n + ''; return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; } const minutesAndSeconds = (position) => ([ pad(Math.floor(position / 60), 2), pad(position % 60, 2), ]); const SeekBar = ({ trackLength, currentPosition, onSeek, onSlidingStart, }) => { const elapsed = minutesAndSeconds(currentPosition); const remaining = minutesAndSeconds(trackLength - currentPosition); return ( <View style={{flexDirection: 'row'}}> {elapsed[0] + ":" + elapsed[1]} <View style={{flex: 1}} /> <Text style={[styles.text, {width: 40}]}> {trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]} <Slider maximumValue={Math.max(trackLength, 1, currentPosition + 1)} onSlidingStart={onSlidingStart} onSlidingComplete={onSeek} value={currentPosition} style={styles.slider} minimumTrackTintColor='#fff' maximumTrackTintColor='rgba(255, 255, 255, 0.14)' thumbStyle={styles.thumb} trackStyle={styles.track}/> {/* <Slider value={this.state.value} onValueChange={(value) => this.setState({value})} /> */} ); }; export default SeekBar; const styles = StyleSheet.create({ slider: { marginTop: -12, }, container: { paddingLeft: 16, paddingRight: 16, paddingTop: 16, }, track: { height: 2, borderRadius: 1, }, thumb: { width: 10, height: 10, borderRadius: 5, backgroundColor: 'white', }, text: { color: 'rgba(255, 255, 255, 0.72)', fontSize: 12, textAlign:'center', } }); player.js:- import React, { Component } from 'react'; import { View, Text, StatusBar, } from 'react-native'; import Header from './Header'; import AlbumArt from './AlbumArt'; import TrackDetails from './TrackDetails'; import SeekBar from './SeekBar'; import Controls from './Controls'; import Video from 'react-native-video'; export default class Player extends Component { constructor(props) { super(props); this.state = { paused: true, totalLength: 1, currentPosition: 0, selectedTrack: 0, repeatOn: false, shuffleOn: false, }; } setDuration(data) { // console.log(totalLength); this.setState({totalLength: Math.floor(data.duration)}); } setTime(data) { //console.log(data); this.setState({currentPosition: Math.floor(data.currentTime)}); } seek(time) { alert("data"+JSON.stringify(time)) return null time = Math.round(time); this.refs.audioElement && this.refs.audioElement.seek(time); this.setState({ currentPosition: time, paused: false, }); } onBack() { if (this.state.currentPosition < 10 && this.state.selectedTrack > 0) { this.refs.audioElement && this.refs.audioElement.seek(0); this.setState({ isChanging: true }); setTimeout(() => this.setState({ currentPosition: 0, paused: false, totalLength: 1, isChanging: false, selectedTrack: this.state.selectedTrack - 1, }), 0); } else { this.refs.audioElement.seek(0); this.setState({ currentPosition: 0, }); } } onForward() { if (this.state.selectedTrack < this.props.tracks.length - 1) { this.refs.audioElement && this.refs.audioElement.seek(0); this.setState({ isChanging: true }); setTimeout(() => this.setState({ currentPosition: 0, totalLength: 1, paused: false, isChanging: false, selectedTrack: this.state.selectedTrack + 1, }), 0); } } render() { const track = this.props.tracks[this.state.selectedTrack]; const video = this.state.isChanging ? null : ( <Video source={{uri: track.audioUrl}} // Can be a URL or a local file. ref="audioElement" paused={this.state.paused} // Pauses playback entirely. resizeMode="cover" // Fill the whole screen at aspect ratio. repeat={true} // Repeat forever. onLoadStart={this.loadStart} // Callback when video starts to load onLoad={this.setDuration.bind(this)} // Callback when video loads onProgress={this.setTime.bind(this)} // Callback every ~250ms with currentTime onEnd={this.onEnd} // Callback when playback finishes onError={this.videoError} // Callback when video cannot be loaded style={styles.audioElement} /> ); return ( <View style={styles.container}> <StatusBar hidden={true} /> <Header message="Playing From Charts" /> <AlbumArt url={track.albumArtUrl} /> <TrackDetails title={track.title} artist={track.artist} /> <SeekBar onSeek={this.seek.bind(this)} trackLength={this.state.totalLength} onSlidingStart={() => this.setState({paused: true})} currentPosition={this.state.currentPosition} /> <Controls onPressRepeat={() => this.setState({repeatOn : !this.state.repeatOn})} repeatOn={this.state.repeatOn} shuffleOn={this.state.shuffleOn} forwardDisabled={this.state.selectedTrack === this.props.tracks.length - 1} onPressShuffle={() => this.setState({shuffleOn: !this.state.shuffleOn})} onPressPlay={() => this.setState({paused: false})} onPressPause={() => this.setState({paused: true})} onBack={this.onBack.bind(this)} onForward={this.onForward.bind(this)} paused={this.state.paused}/> {video} </View> ); } } const styles = { container: { flex: 1, backgroundColor: 'rgb(4,4,4)', }, audioElement: { height: 0, width: 0, } }; — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJJQO4DEEWQNOYZY7NWCCZDPTAF3RANCNFSM4HJIWUOQ> .

[Waqas-Jani]

And just replace slider with react native import slider On Tue, 30 Apr 2019, 2:30 p.m. Muhammad Waqas, < mwaqassabirofficial@gmail.com> wrote:

…

Use react native own slider instead react-native-slider ,, On Tue, 30 Apr 2019, 2:24 p.m. shubham-akole, ***@***.***> wrote: > seekbar.js:- > import React, { Component } from 'react'; > > import { > View, > Text, > StyleSheet, > Image, > TouchableOpacity, > } from 'react-native'; > > var Slider = require('react-native-slider'); > > function pad(n, width, z=0) { > n = n + ''; > return n.length >= width ? n : new Array(width - n.length + 1).join(z) + > n; > } > > const minutesAndSeconds = (position) => ([ > pad(Math.floor(position / 60), 2), > pad(position % 60, 2), > ]); > > const SeekBar = ({ > trackLength, > currentPosition, > onSeek, > onSlidingStart, > }) => { > const elapsed = minutesAndSeconds(currentPosition); > const remaining = minutesAndSeconds(trackLength - currentPosition); > > return ( > > <View style={{flexDirection: 'row'}}> > > {elapsed[0] + ":" + elapsed[1]} > > <View style={{flex: 1}} /> > <Text style={[styles.text, {width: 40}]}> > {trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]} > > > <Slider > maximumValue={Math.max(trackLength, 1, currentPosition + 1)} > onSlidingStart={onSlidingStart} > onSlidingComplete={onSeek} > value={currentPosition} > style={styles.slider} > minimumTrackTintColor='#fff' > maximumTrackTintColor='rgba(255, 255, 255, 0.14)' > thumbStyle={styles.thumb} > trackStyle={styles.track}/> > {/* <Slider > value={this.state.value} > onValueChange={(value) => this.setState({value})} /> */} > > ); > }; > > export default SeekBar; > > const styles = StyleSheet.create({ > slider: { > marginTop: -12, > }, > container: { > paddingLeft: 16, > paddingRight: 16, > paddingTop: 16, > }, > track: { > height: 2, > borderRadius: 1, > }, > thumb: { > width: 10, > height: 10, > borderRadius: 5, > backgroundColor: 'white', > }, > text: { > color: 'rgba(255, 255, 255, 0.72)', > fontSize: 12, > textAlign:'center', > } > }); > > player.js:- > > import React, { Component } from 'react'; > import { > View, > Text, > StatusBar, > } from 'react-native'; > import Header from './Header'; > import AlbumArt from './AlbumArt'; > import TrackDetails from './TrackDetails'; > import SeekBar from './SeekBar'; > import Controls from './Controls'; > import Video from 'react-native-video'; > > export default class Player extends Component { > constructor(props) { > super(props); > > this.state = { > paused: true, > totalLength: 1, > currentPosition: 0, > selectedTrack: 0, > repeatOn: false, > shuffleOn: false, > }; > > } > > setDuration(data) { > // console.log(totalLength); > this.setState({totalLength: Math.floor(data.duration)}); > } > > setTime(data) { > //console.log(data); > this.setState({currentPosition: Math.floor(data.currentTime)}); > } > > seek(time) { > alert("data"+JSON.stringify(time)) > return null > time = Math.round(time); > this.refs.audioElement && this.refs.audioElement.seek(time); > this.setState({ > currentPosition: time, > paused: false, > }); > } > > onBack() { > if (this.state.currentPosition < 10 && this.state.selectedTrack > 0) { > this.refs.audioElement && this.refs.audioElement.seek(0); > this.setState({ isChanging: true }); > setTimeout(() => this.setState({ > currentPosition: 0, > paused: false, > totalLength: 1, > isChanging: false, > selectedTrack: this.state.selectedTrack - 1, > }), 0); > } else { > this.refs.audioElement.seek(0); > this.setState({ > currentPosition: 0, > }); > } > } > > onForward() { > if (this.state.selectedTrack < this.props.tracks.length - 1) { > this.refs.audioElement && this.refs.audioElement.seek(0); > this.setState({ isChanging: true }); > setTimeout(() => this.setState({ > currentPosition: 0, > totalLength: 1, > paused: false, > isChanging: false, > selectedTrack: this.state.selectedTrack + 1, > }), 0); > } > } > > render() { > > const track = this.props.tracks[this.state.selectedTrack]; > > const video = this.state.isChanging ? null : ( > <Video source={{uri: track.audioUrl}} // Can be a URL or a local file. > ref="audioElement" > paused={this.state.paused} // Pauses playback entirely. > resizeMode="cover" // Fill the whole screen at aspect ratio. > repeat={true} // Repeat forever. > onLoadStart={this.loadStart} // Callback when video starts to load > onLoad={this.setDuration.bind(this)} // Callback when video loads > onProgress={this.setTime.bind(this)} // Callback every ~250ms with currentTime > onEnd={this.onEnd} // Callback when playback finishes > onError={this.videoError} // Callback when video cannot be loaded > style={styles.audioElement} /> > ); > > return ( > <View style={styles.container}> > <StatusBar hidden={true} /> > <Header message="Playing From Charts" /> > <AlbumArt url={track.albumArtUrl} /> > <TrackDetails title={track.title} artist={track.artist} /> > <SeekBar > onSeek={this.seek.bind(this)} > trackLength={this.state.totalLength} > onSlidingStart={() => this.setState({paused: true})} > currentPosition={this.state.currentPosition} /> > <Controls > onPressRepeat={() => this.setState({repeatOn : !this.state.repeatOn})} > repeatOn={this.state.repeatOn} > shuffleOn={this.state.shuffleOn} > forwardDisabled={this.state.selectedTrack === this.props.tracks.length - 1} > onPressShuffle={() => this.setState({shuffleOn: !this.state.shuffleOn})} > onPressPlay={() => this.setState({paused: false})} > onPressPause={() => this.setState({paused: true})} > onBack={this.onBack.bind(this)} > onForward={this.onForward.bind(this)} > paused={this.state.paused}/> > {video} > </View> > ); > > } > } > > const styles = { > container: { > flex: 1, > backgroundColor: 'rgb(4,4,4)', > }, > audioElement: { > height: 0, > width: 0, > } > }; > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#8 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AJJQO4DEEWQNOYZY7NWCCZDPTAF3RANCNFSM4HJIWUOQ> > . >

[shubham-akole]

thanks... can you help me one more

[shubham-akole]

TypeError:null is not an object(evaluting 'RCTVideoInstance.constants')
this error is located:
in video (at player.js:89)
in VIew (player.js:103)

[Waqas-Jani]

Read the docs of video package

…

On Tue, 30 Apr 2019, 2:45 p.m. shubham-akole, ***@***.***> wrote: TypeError:null is not an object(evaluting 'RCTVideoInstance.constants') this error is located: in video (at player.js:89) in VIew (player.js:103) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJJQO4BFAV2BUMXSG5BMLNLPTAIKDANCNFSM4HJIWUOQ> .

[shahidemdad]

@Waqas-Jani hey man, I saw you to help others. I added a new issue do you mind to help me please? Thank you in advance