Problems with facebook ads sdk - react-native

I am making react native expo app. I wanted to add FB ads to my app. I have done all like in the docs, but it gives me an error:
"errorCode": 1203,
"errorMessage": "The SDK version in the ad request is no longer supported for new apps. Please upgrade to one of the latest versions of the SDK",
},
How I can download the latest fd ads SDK? I downloaded SDK from this page:
https://github.com/expo/expo/tree/master/packages/expo-ads-facebook
I am using expo sdk 33. Please help me. I need it very much
Code:
// page.js
import React from 'react';
import { View } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json
import * as FacebookAds from 'expo-ads-facebook';
import AdScreenFacebook from './AdScreenFacebook'
const adsManager = new FacebookAds.NativeAdsManager("2272791379702600_2272795453035526", 10);
class AdScreen extends React.Component {
render () {
return (
<View>
<AdScreenFacebook adsManager={adsManager} />
<FacebookAds.BannerAd
placementId="2272791379702600_2272803043034767"
type="standard"
onPress={() => console.log('click')}
onError={error => console.log('error', error)}
/>
</View>
);
}
}
export default createStackNavigator(
{
Main: {
screen: AdScreen,
},
AdScreenFacebook: {
screen: AdScreenFacebook,
}
},
{
initialRouteName: 'Main',
}
);
// AdScreenFacebook.js
import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import * as FacebookAds from 'expo-ads-facebook';
const { AdTriggerView, AdMediaView, AdIconView } = FacebookAds;
class AdScreenFacebook extends React.Component {
render () {
return (
<View style={{ flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',}}>
<View style={{ width:500}}>
<AdMediaView style={{ width: 160, height: 90 }}/>
<View style={{flexDirection: 'row'}}>
<AdIconView style={{ width: 50, height: 50 }}/>
<AdTriggerView>
<Text>{this.props.nativeAd.bodyText}</Text>
<Text>{this.props.nativeAd.callToActionText}</Text>
</AdTriggerView>
</View>
</View>
</View>
);
}
}
export default FacebookAds.withNativeAd(AdScreenFacebook);

Related

How can I get button-click-navigation and touch-slide-navigation at the same time in React Native?

This is some part of the YouTube video.(using createStackNavigator in React Native).
How can I achieve this kind of effect in React Native( Navigation by button click and touch slide at the same time ) ?
I followed this video but it works such as fadeIn, fadeOut effect in jQuery.
The author of this video installed "yarn add react-navigation#2.0.0-beta.3".
I installed it but it gave me error. So I used this. "yarn add react-navigation".
This is the whole code of App.js.
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
class ScreenComponentOne extends React.Component {
render() {
return (
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
borderWidth: 25,
borderColor: '#f00',
}}
>
<Button
title="Go to the screen two"
onPress={() => {
this.props.navigation.navigate('RouteNameTwo')
}}
/>
</View>
)
}
}
class ScreenComponentTwo extends React.Component {
render() {
return (
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
borderWidth: 25,
borderColor: '#f0f',
}}
>
<Button
title="Go to the screen one"
onPress={() => {
this.props.navigation.navigate({routeName:'RouteNameOne', transitionStyle: 'inverted'})
}}
/>
</View>
)
}
}
const AppNavigator = createStackNavigator({
RouteNameOne: {
screen:ScreenComponentOne,
navigationOptions:{
header:null,
}
},
RouteNameTwo: {
screen:ScreenComponentTwo,
navigationOptions:{
header:null,
}
},
},
{
initialRouteName:"RouteNameOne"
});
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
I'd like to get touch-slide-navigation and button-click-navigation at the same time.
The module that I installed is as follows:
-yarn install
-yarn add react-navigation (for createAppContainer)
-yarn add react-navigation-stack (for createStackNavigator)
How can I achieve this ?

Unable to get tab bar from react-navigation working

I want to show tab bar in my react-native app using react-navigation library. I've tried code from an example provided in the documentation. However, when I run the code on iOS simulator the screen appears to be blank, tab bar doesn't load.
Here's my code so far,
TabNavigator.js
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(TabNavigator);
App.js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import TabNavigator from './components/TabNavigator';
const App = () => {
return (
<View>
<TabNavigator />
</View>
);
};
export default App;
Looking at the App.js code, you forgot to put flex:1 to the view, it's one of the common mistakes that react-navigation tells about in his documentation.
const App = () => {
return (
<View style={ { flex:1} }>
<TabNavigator />
</View>
);
};
Source: https://reactnavigation.org/docs/en/common-mistakes.html#wrapping-appcontainer-in-a-view-without-flex

How to correctly import 'NavigatorIOS'

I'm getting an error when trying to load my React-Native App. It seems to be related to NavigatorIOS being undefined. When I try to use a text component, that works fine, so is the problem specific to how I'm using NavigatorIOS?
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Fragment, Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
NavigatorIOS,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class SearchPage extends Component<{}> {
render() {
return (<Text style={styles.description}>Search for houses to buy! (Again)</Text>);
}
};
console.log(NavigatorIOS)
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
initialRoute={{
component: SearchPage,
title: 'My Initial Scene',
}}
style={{flex: 1}}
/>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
I'm getting an error as follows:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
NavigatorIOS is Deprecated since 0.6.
Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html
Example react-navigation:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
'use strict';
import React,{Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Button,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class HomePage extends Component<{}> {
render() {
return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="Go to SecondPage" onPress={() => this.props.navigation.push('SecondPage')}/>
</View>
}
};
class SecondPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Second Page</Text>
<Button title = "Go to Third Page" onPress={() => this.props.navigation.navigate('ThirdPage')}> </Button>
</View>
}
};
class ThirdPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Third Page</Text>
<Button title = "Go to Home Page" onPress={() => this.props.navigation.navigate('Home')}> </Button>
</View>
}
};
const AppNavigator = createStackNavigator(
{
Home : HomePage,
SecondPage : SecondPage,
ThirdPage : ThirdPage,
},
{
initialRouteName: 'Home',
}
);
const Appcontainer = createAppContainer(AppNavigator);
export default class App extends Component<{}> {
render() {
return <Appcontainer />;
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});

While adding navigation PLugin its not Working showing error

New to react-native and trying to make react-native with the sample app.
I created Two Screen. LOGIN AND FORM Screen.
I want Once I clicked to login button it will go to form screen. I add library of navigation for routing.
But it shows error.
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/pages/pages/Login';
import Form from './src/pages/pages/Form';
const AppNavigator = StackNavigator({
Login: { screen: Login},
Form: { screen: Form},
});
export default class App extends Component<{}> {
render() {
return (
<View style ={styles.container}>
<AppNavigator/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
TouchableOpacity
} from 'react-native';
export default class Login extends Component {
state = {
username: '', password: ''
}
onChangeText = (key, val) => {
this.setState({ [key]: val })
}
signUp = async () => {
const { username, password } = this.state
try {
// here place your signup logic
console.log('user successfully signed up!: ', success)
} catch (err) {
console.log('error signing up: ', err)
}
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Username'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('username', val)}
/>
<TextInput
style={styles.input}
placeholder='Password'
secureTextEntry={true}
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('password', val)}
/>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Form') } title = "Form"
>
<Text > LOGIN </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
width: 350,
height: 55,
backgroundColor: '#ff4000',
margin: 10,
padding: 8,
color: 'white',
borderRadius: 4,
fontSize: 18,
fontWeight: '500',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
alignItems: 'center',
backgroundColor: '#58d63b',
padding: 10,
width:320,
height:55
}
})
Form.js
import React, {Component} from 'react';
import {View,Text} from 'react';
export default class Login extends Component {
render() {
return (
<View>
<Text> This Is Form Page</Text>
</View>
);
}
}
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
THIS IS THE ERROR I HAVE GETTING ALL THE TIME
I tried everything clear cache and re-install npm but no luck.
Anyone can help.It would be great.

React Navigation Issue with NavigationActions

I have an application in which I am trying to apply navigation in some case. For example, A, B, C, D are my tabs and in the tab A, I have 3 pages as 1, 2, 3. Now in a situation where I am on tab A and on page 3, there is one button present in which I have to navigate back to page 1 on the same tab itself (A).
But somehow, my navigation is not working in this case. Below are my codes:
SkippedTask.js
import React from "react";
import {
View,
StyleSheet,
Text,
AsyncStorage,
Dimensions,
Image,
ScrollView,
Alert
} from "react-native";
import ButtonC from "../../components/ButtonC";
import { NavigationActions } from "react-navigation";
import Server from "../../provider/Server";
var { width, height } = Dimensions.get("window");
export default class SkippedTask extends React.Component {
constructor(props) {
super(props);
this.state = {
loadingState: false,
api: new Server(),
mobile: "",
arrayLenght: "",
tasklist: [],
taskTitle: []
};
}
renderSkippedQues() {
return (
<View style={{ marginTop: 0 }}>
{this.state.taskTitle.map((item, key) => (
<View key={key} style={{ marginTop: 0 }}>
<Text style={{}}>
<Text style={{ fontSize: 18, color: "#000" }}>{"\u2022"} </Text>{" "}
{item}
</Text>
</View>
))}
</View>
);
}
handleNav = () => {
this.props.navigation.dispatch(
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "DashboardTab" })]
})
);
};
render() {
if (this.state.arrayLenght <= 0) {
return <View />;
} else {
return (
<ScrollView>
<View
style={{
justifyContent: "center",
alignItems: "center",
marginTop: height / 40
}}
>
<Text style={{ fontSize: 16, color: "black", marginTop: 30 }}>
List of skipped task are :
</Text>
{this.renderSkippedQues()}
<View style={{ marginTop: 40 }} />
<ButtonC
title=" Click here to complete remaining task "
onPress={this.handleNav}
/>
</View>
</ScrollView>
);
}
}
}
Below is my App.js file in which I am using StackNavigator of react-navigation.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import SessionCheck from './src/screens/SessionCheck';
import LoginScreen from './src/screens/LoginScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import WalletsScreen from './src/screens/WalletsScreen';
import DashboardAccept from './src/screens/DashboardAccept';
import TermsConditionsScreen from './src/screens/TermsConditionsScreen';
import DashboardTabScreen from './src/screens/DashboardTabScreen';
import Person from './src/components/profile/Person';
import Payment from './src/components/profile/Payment';
import List from './src/components/task/List';
const App = StackNavigator({
// DashboardTab: { screen:DashboardTabScreen },
Home: { screen: SessionCheck },
Login: { screen: LoginScreen },
Register: { screen: RegisterScreen },
Profile: { screen:ProfileScreen },
Wallets: { screen:WalletsScreen },
DashboardAccept: { screen:DashboardAccept },
TermsConditions: { screen:TermsConditionsScreen },
DashboardTab: { screen:DashboardTabScreen },
Person: {screen: Person},
Payment : {screen: Payment},
AllTask:{screen: List}
});
export default App;
Now my case lies that I need to navigate from the SkippedTask page to AllTask screen as mentioned in the App.js file. But somehow I am not able to resolve this issue.
Any leads are appreciated. Thanks.