import { Sound } from 'react-native-sound'
import React, { Component } from 'react'
import { Button } from 'react-native'
//import Audio from 'react-native-audio'
class About extends Component {
playTrack = () => {
const track = new Sound('geetha_govindham_song.mp3','', null, (e) => {
if (e) {
console.log('error loading track:', e)
} else {
//track.play()
}
})
track.play()
}
render() {
console.log("CCCCC", JSON.stringify(Sound));
return <Button title="play me" onPress={this.playTrack} />
}
}
export default About
After executing this we got the error like undefined is not a constructor.
Here, i used react-native-sound module for playing mp3 song. But, I got the error like, what shown in the picture. Please give any suggestion to me to solve the issue.
Could you try using require?
const Sound = require('react-native-sound');
you should do default import:
import Sound from ‘react-native-sound’
You can find the example in the project’s README: https://github.com/zmxv/react-native-sound/blob/master/README.md
Related
I try to play video from server. This is my code:
import React, {useState, useEffect} from 'react';
import { Button } from 'react-native';
import { Audio } from 'expo-av';
export default function App() {
const [audioStatus, setAudioStatus] = useState(false)
const [sound, setSound] = useState(new Audio.Sound());
useEffect(()=>{
(async () => {
console.log('status', audioStatus)
if (audioStatus) {
await sound.loadAsync('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
try {
await sound.playAsync()
} catch (e) {
console.log(e)
}
}else {
await sound.stopAsync()
await sound.unloadAsync()
}
})()
},[audioStatus])
return (
<Button color={audioStatus ? 'red' : 'green'} title={'play'} onPress={()=>setAudioStatus(!audioStatus)} />
);
}
And I get error:
LOG status false
WARN Possible Unhandled Promise Rejection (id: 15):
Error: Cannot complete operation because sound is not loaded.
http://192.168.100.60:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:100133:28
generatorResume#[native code]
asyncGeneratorStep#http://192.168.100.60:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:20982:26
It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
[React Native]
Can anyone help to elaborate what should that kind of menu called? When onclick, it slided up. Please also introduce what are other menu's available in react native? (Must work for both android and iOS)
Example
It is share dialog and you can easily implement it in React Native
Try this code
import React, {Component} from 'react';
import {Share, Button} from 'react-native';
class ShareExample extends Component {
onShare = async () => {
try {
const result = await Share.share({
message:
'React Native | A framework for building native apps using React',
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}
};
render() {
return <Button onPress={this.onShare} title="Share" />;
}
}
React Native Modal
1-
react-native-modal
2-
react-native-modalbox
I just updated RNN to version 2 and I'm stuck with my first push
I get an error :
undefined is not an object (evaluating '_reactNativeNavigation.default.push')
other answers on stack overflow didn't help me much so far
I guess my issue is related to this.props.componentId but I couldn't find any help in the official doc as well.
or perhaps it's coming from a wrong call to the stack since I never use the id property set in App.js
I'm also wondering if I have to provide an id manually for each screen or, as it is said in the doc it will be done automatically by RNN
if someone can guide me, I'm a bit lost -_-
my code :
App.js
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import LandingScreen from './src/screens/Landing/Landing';
import AuthScreen from './src/screens/Auth/Auth';
import configureStore from './src/store/configureStore';
import strings from './src/global/strings';
const store = configureStore();
// Landing
Navigation.registerComponentWithRedux(strings.screens.screenLanding, () => LandingScreen, Provider, store);
// Auth
Navigation.registerComponentWithRedux(strings.screens.screenAuth, () => AuthScreen, Provider, store);
// Start App
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack:{
id:"appStack",
children: [
{
component: {
name: strings.screens.screenLanding,
options: {
topBar:{
title:{
text:"Welcome"
}
}
}
}
}
]
},
}
});
});
Landing.js
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import Navigation from 'react-native-navigation';
import strings from '../../global/strings';
class Landing extends Component {
goToScreen = (screenName) => {
Navigation.push(this.props.componentId, {
component: {
name: screenName
}
})
}
render() {
return (
<View>
<Button
title="Connexion"
onPress={() => this.goToScreen(strings.screens.screenAuth.toString())}
/>
</View>
)
}
}
export default Landing;
as indicated by jinshin1013 in RNN issue tracker In Landing.js,
I should have import Navigation like this :
import { Navigation } from 'react-native-navigation
I've started learning React Native with Redux and I'm building a simple login with Google and Facebook login which I want to sent to a Parse backend on AWS.
I have the following Facebook Button Component:
import { Button } from 'react-native';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import { LoginManager } from 'react-native-fbsdk';
import { createUser } from '../actions';
class FacebookButton extends Component {
facebookButtonPressed(){
this.props.createUser("dummyemail#gmail.com","12345");
}
render() {
return (
<Button
onPress={this.facebookButtonPressed.bind(this)}
title="Sign In with Facebook"
color="#000000"
/>
);
}
}
export default connect(null,{ createUser })(FacebookButton);
I haven't done any Facebook integration yet, I just want to see if I can create a parse user. This is the action I'm using:
import Parse from 'parse/react-native';
export const createUser = (email, name) => {
return (dispatch) => {
var user = new Parse.User();
user.set("username", "my name");
user.set("password", "my pass");
user.set("name",name);
user.set("email", email);
// other fields can be set just like with Parse.Object
user.set("phone", "415-392-0202");
user.signUp(null, {
success: function(user) {
// Hooray! Let them use the app now.
console.log("User created");
},
error: function(user, error) {
// Show the error message somewhere and let the user try again.
alert("Error: " + error.code + " " + error.message);
}
});
}
};
When I run the debugger in the browser, I'm able to see that the createUser is called and when we call user.signUp I get the following error:
undefined is not an object (evaluating 'reactNative.AsyncStorage.getItem')
When I read the Parse Javascript docs and try the following:
//Get your favorite AsyncStorage handler with import (ES6) or require
import { AsyncStorage } from 'react-native';
//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
I call the Parse.setAsyncStorage(AsyncStorage); in the code below.
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Parse from 'parse/react-native';
import { Provider } from 'react-redux';
import Login from './src/screens/Login';
import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware } from 'redux';
export default class App extends Component {
componentWillMount() {
Parse.initialize("MY KEY");
Parse.serverURL = 'MY URL';
Parse.setAsyncStorage(AsyncStorage);
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<Login />
</Provider>
);
}
}
I get an error of reactNative2.default.setAsyncStorage is not a function. Frankly I tried Parse.setAsyncStorage(AsyncStorage); in hopes of this fixing the AsyncStorage issue mentioned above.
So any ideas as to why I get the funny AsyncStorage error message when trying to create a Parse user?
I'm leaving an answer here in case someone else stumbles across any other issues. The problem was the version of Parse I was using. I was using Parse version 1.6.14. Steps to fix:
Open the package.json file and update your Parse version to any version above 1.11, for me 1.11.1 worked.
In the terminal: npm install
this should fix the issues mentioned above, bear in mind that you have to implement:
//Get your favorite AsyncStorage handler with import (ES6) or require
import { AsyncStorage } from 'react-native';
//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
as per documentation.
I get a problem with Expo and react-native. When I try to loadAsync font from assets folder I get this error:
[Unhandled Promise rejection: Error: Font not found /data/data/host.exp.exponent/cache/ExperienceData/.../ExponentAsset-5868d2d7f28da04ee373451e87d682f8.ttf]
My code in App.js
import React, { Component } from "react";
import { configureStore } from "./store.js";
import { Provider } from "react-redux";
import { AppLoading, Font } from 'expo';
import MainWrapper from './components/mainWrapper'
const store = configureStore();
export default class App extends Component {
state = {
appReady: false
}
loadAssets = async () => {
await Font.loadAsync({
'Arial': require('./assets/fonts/Arial.ttf')
});
this.setState({appReady: true});
}
componentDidMount() {
this.loadAssets()
}
render() {
return (
<Provider store={store}>
{this.state.appReady ?
<MainWrapper />
:
<AppLoading />
}
</Provider>
);
}
}
and I use
"expo": {
"sdkVersion": "21.0.0"
}
Most of my App.js I took from Expo example with some changes. Do you have any ideas how can I resolve this error?
It was broken .ttf file. I downloaded correct file of font from another source and my problem has been resolved. But what about FontAwesome I will explore this.