I am trying to integrate React Native Google Mobile Ads into my project and I am not sure where the European user consent should and outbound request configuration should go. For example, how should I integrate this outbound code to my app.js
Full documation
Outbound
import mobileAds, { MaxAdContentRating } from 'react-native-google-mobile-ads';
mobileAds()
.setRequestConfiguration({
// Update all future requests suitable for parental guidance
maxAdContentRating: MaxAdContentRating.PG,
// Indicates that you want your content treated as child-directed for purposes of COPPA.
tagForChildDirectedTreatment: true,
// Indicates that you want the ad request to be handled in a
// manner suitable for users under the age of consent.
tagForUnderAgeOfConsent: true,
// An array of test device IDs to allow.
testDeviceIdentifiers: ['EMULATOR'],
})
.then(() => {
// Request config successfully set!
});
app.js
import React, {useState, useEffect} from 'react';
import {
SafeAreaView,
Text, Button
} from 'react-native';
import { BannerAd, BannerAdSize,InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';
export default function App() {
return(
<SafeAreaView>
<BannerAd
unitId={adUnitId}
size={BannerAdSize.FULL_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
<Text>Hello World</Text>
/>
</SafeAreaView>
)
}
Related
I am using withAuthenticator component of AWS aws-amplify-react-native from AWS amplify. I am able to do this for signUp <SignUp signUpConfig={signUpConfig} />, I want to customise signIn, ConfirmSignUp, ForgotPassword screen also without writing my own component from scratch.
signUp config seems to be doable because signUpConfig is part of this class https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/Auth/SignUp.tsx#L47
But same is not available for singIn and other components. Is there an alternate to have customise signIn, ConfirmSignUp, ForgotPassword screens.
Note[1] - I am not able to use Authenticator component of aws-amplify-react-native, SignUp screen is shown on half of the page, apparently it have rendering bugs.
Note[2] - I am not able to use Authenticator from #aws-amplify/ui-react also, Seems its built only for react and not for react-native. Although doc says its for react-native also.
You have to use Auth from aws-amplify. I did something like this.
/* Import the Amplify Auth API */
import { Auth } from 'aws-amplify';
export default function LoginScreen() {
const login = async () => {
if (validateInputFields(formData)) {
try {
await Auth.signIn(formData.email, formData.password);
goToHomeScreen();
} catch (err) { console.log({ err }); }
}
}
return (
<View>
{/* Email and Password fields /*}
<Button title="Login" onPress={() => login()} />
</View>
)
}
The doc has the API for SignUp as well ЁЯСН
https://docs.amplify.aws/guides/authentication/custom-auth-flow/q/platform/js/
I have a react native app that I'm building as project for a company. the company wants to provide the option of choosing the language on set up and then changing it if needed from the settings page, same way the phone language on android works.
I first thought about saving the text in JSON file and loading the text from there when the app starts, and when I made my search I only found solution about localization rather than using multiple languages the way I'm doing.
So I was wondering if anyone can confirm that the JSON file solution I thought of is a good and useful idea and if there is other better solutions to use instead?
There are many solutions to this in react native. One would be to use i18n combined with your localization JSON files to create a multi language solution.
Example In Practice:
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native';
import { strings } from '../locales/i18n';
class Screen extends Component {
render() {
return (
<View>
<Text>{strings('screenName.textName')}</Text>
</View>
);
}
}
Full Explanation: https://medium.com/#danielsternlicht/adding-localization-i18n-g11n-to-a-react-native-project-with-rtl-support-223f39a8e6f2
Project react-native-i18n is deprecated now. Read this article Internationalization in React Native which doesn't required any linking or any configuration except for this little configuration.
import i18n from 'i18n-js';
import en from './locales/en.json';
import de from './locales/de.json';
i18n.defaultLocale = 'en';
i18n.locale = 'en';
i18n.fallbacks = true;
i18n.translations = { en, de };
export default i18n;
To display internationalized information on the page we can use i18n.t() function by passing a translation key as an argument. e.g. i18n.t("home.welcome")
using multilanguage (HINDI,ENGLISH) in react native app
frist create 2 json file
main folder...Language
1..hi.json
{
name:'Name'
Address:'Address'
}
2..en.json
{
name:'рдирд╛рдо'
Address:'рдкрддрд╛'
}
3.then install this... i18n
4..create a file i18n.js
import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import en from '../Language/en.json';
import hi from '../Language/hi.json';
i18n.use(initReactI18next).init({
lng: 'en',
fallbackLng: 'en',
resources: {
en: en,
hi: hi,
},
interpolation: {
escapeValue: false
}
});
export default i18n;
5...App.js import this lines
import './Language/i18n';
import {useTranslation} from 'react-i18next';
6...App.js code
function HomeScreen() {
const {t,i18n} = useTranslation();
const [currentLanguage,setLanguage] =useState('en');
const changeLanguage = value => {
i18n
.changeLanguage(value)
.then(() => setLanguage(value))
.catch(err => console.log(err));
};
return (
<View style={{flex:1,backgroundColor:'#ccc'}}>
<Text>{t("name")}</Text>
<View>
<TouchableOpacity onPress={()=>changeLanguage('en')}>
<Text> ENGLISH</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>changeLanguage('hi')}>
<Text>рд╣рд┐рдиреНрджреА</Text>
</TouchableOpacity>
</View>
</View>
);
}
export default HomeScreen;
I'm in the process of developing a mobile application that will need to manage the state of the entire application. To solve this issue I decided to integrate redux into the Tech stack. When I attempt to connect my redux store to the application to access information contained in the store I get an error in my simulator that tells me I need to pass the Provider with a state property as a parent to the App component.
I attempt to do this through my index.js file on the top level of my file system; Within the AppRegistry registerComponent method, wrapping the "appName" with the Provider with the store added as a prop, with no luck.
Any suggestions will be helpful.
https://github.com/Wheaties247/filcrum
Doesn't seem like you have setup redux in your project.
You should do something like this on your main component
import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import AppReducer from './src/reducers';
import { AppNavigator, middleware } from './src/navigators/AppNavigator';
const store = createStore(AppReducer, applyMiddleware(middleware));
class ReduxExampleApp extends React.Component {
render() {
return (
<Provider store={store}>
<AppNavigator />
</Provider>
);
}
}
AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);
export default ReduxExampleApp;
check react navigation docs for more information about redux integration
https://reactnavigation.org/docs/en/redux-integration.html#docsNav
In order to have default auth screen, I can merely do this (https://github.com/aws-samples/aws-mobile-react-native-starter):
import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);
And I get pretty ugly default out-of-the-box login screen:
Then docs say I can't modify default, I have to create my own (https://github.com/aws-samples/aws-mobile-react-native-starter):
You can either use this Higher Order Component, or build your own UI and use the APIs from Amplify too.
But also they thay say, that I can customize default login screens (https://github.com/aws/aws-amplify/blob/master/README.md):
AWS Amplify will provide you customizable UI for common use cases such as user registration and login.
Question is, can we customize default screen or we must create our own screens if we want something fancy?
All the Amplify Authenticator components can be imported separately from aws-amplify-react-native. You can copy the source code the repo (https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native/src) to your own project, modify it and import from there.
* If you want to get the package for other framework - React, Vue, Angular, etc, visit here https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native.
Currently, in my project, I am customizing SignUp, SignIn and ConfigrmSignUp components as shown below. This is the suggested way of creating your own UI and it works seamlessly with the amplify authenticator.
Check out more here:
https://aws-amplify.github.io/docs/js/authentication#create-your-own-ui
import {
withAuthenticator,
SignUp,
ConfirmSignIn,
ConfirmSignUp,
ForgotPassword,
VerifyContact,
Greetings,
Loading,
RequireNewPassword
} from 'aws-amplify-react-native';
import {
Authenticator,
ConfirmSignUpScreen, <----- customized authenticator component
SignUpScreen, <----- customized authenticator component
SignInScreen <----- customized authenticator component
} from './screens/auth';
export default withAuthenticator(App, false, [
<Loading />
<SignInScreen /> <----- customized authenticator component
<ConfirmSignIn />
<VerifyContact />
<SignUpScreen /> <----- customized authenticator component
<ConfirmSignUpScreen /> <----- customized authenticator component
<ForgotPassword />
<RequireNewPassword />
<Greetings />
]);
According to the docs, you should be able to wrap your app in a HOC (Authenticator) instead of using the withAuthenticator.
import { Authenticator } from 'aws-amplify-react';
export default class AppWithAuth extends Component {
render(){
return (
<Authenticator>
<App />
</Authenticator>
);
}
}
I had the same probleme with customise the signUp and SignIn Component for aws-amplify so I created this lib (aws-amplify-react-custom-ui) . this is the example for customise the signIn :
import SignIn from "./SignIn";
import AmplifyCustomUi from "aws-amplify-react-custom-ui";
AmplifyCustomUi.setSignIn(SignIn);
for more infroamtion :
https://github.com/ysfmag/aws-amplify-react-custom-ui
Yes, we could customize the screens with the aws-amplify-react-native package. The Amplify CLI API's are called with our custom screens. The logic may differ by use cases, here's a glimpse of code that may help you ahead kindly ref this doc
import React, { Component } from 'react';
import { View } from 'react-native';
import {
Authenticator,
AmplifyTheme
} from 'aws-amplify-react-native';
// Custom screens
import Home from './screens/Home';
import SignIn from './screens/SignIn';
import SignUp from './screens/SignUp';
import ConfirmSignUp from './screens/ConfirmSignUp';
import ForgotPassword from './screens/ForgotPassword';
//Custom theme
const theme = {
...AmplifyTheme,
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-around',
paddingTop: 10,
width: '100%',
marginTop: 30
},
}
class App extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Authenticator theme={theme} hideDefault={true} hide="Home"
includeGreetings={true}
>
<SignIn />
<SignUp/>
<ConfirmSignUp />
<ForgotPassword />
<Home />
</Authenticator>
</View>
);
}
}
export default App;
;)
So i am stuck in there. I just want to add a but it never renders it.
It renders the "Registered project page".
index.ios.js
import native from './src';
native();
./src/index.js
import { AppRegistry, Text } from 'react-native';
import React, { Component } from 'react';
export default function index() {
class Root extends Component {
render() {
return (
<Text>
Welcome to React Native!
</Text>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => Root);
}
So it all works great. I can even debug and see that the App component is called etc. But why i never get to render anything except that window ?