I am working with a react native application, and it shows a warning in the console
import {createStackNavigator} from 'react-navigation-stack';
import {fromRight} from 'react-navigation-transitions';
const ApplyNowNav = createStackNavigator(
{
Home,
Profile,
},
{
headerMode: 'none',
transitionConfig: () => fromRight(),
}
);
WARN Deprecation in 'createStackNavigator':
transitionConfig' is removed in favor of the new animation APIs
Is there any solution to fix this issue?
You need to update your code to use to use the new Animation API: https://reactnavigation.org/docs/en/stack-navigator.html#animations
From the code you posted, you can change it to the following instead to have a slide from right animation:
import { createStackNavigator, TransitionPresets } from 'react-navigation-stack';
const ApplyNowNav = createStackNavigator(
{
Home,
Profile,
},
{
headerMode: 'none',
defaultNavigationOptions: {
...TransitionPresets.SlideFromRightIOS,
},
}
);
Update react-navigation and use creatStackNavigator component instead of StackNavigator.
Check current methods and syntax, there is a lot of changes compare to previous syntax.
Works for me when I updated the code
Related
I am trying to integrate the google default sign-in button into my website though it is working fine, I am seeing annoying white space, how to eliminate that?
Image:
Google sign-in button in black background
import useScript from "../hooks/useScript";
import { useTheme } from "next-themes";
import Router from "next/router";
import { useRef } from "react";
import axios from "axios";
export default function GoogleLogin(props) {
const googleSignInButton = useRef(null);
const { theme, setTheme } = useTheme();
const onGoogleSignIn = async (data) => {
const res = await axios.post("http://localhost:5555/api/auth/v1/google", data);
console.log(res.data.url);
}
useScript("https://accounts.google.com/gsi/client", () => {
window.google.accounts.id.initialize({
client_id: process.env.NEXT_PUBLIC_GAUTH_CLIENT,
allowed_parent_origin: "http://localhost:3000",
callback: onGoogleSignIn,
auto_select: true,
context: 'use'
});
window.google.accounts.id.renderButton(
googleSignInButton.current,
{
// type: "icon",
size: "large",
text: "continue_with",
theme: "filled_black",
});
google.accounts.id.prompt();
});
return <div ref={googleSignInButton}></div>;
}
My tries:
I tried styling this button using sass, but apparently, the main button is inside the iframe which I can't not style.
I tried developing a custom button using google GSI APIs, but it's deprecated and doesn't work with new Oauth creditents.
I tried making a custom button that invokes google login on click but it also didn't work.
Right now, I understand that the new google sign-in does give much freedom to customize, Is there is way around it?
Add color-scheme: light; to button wrapper
I'm trying to use the ubuntu-mono font in react with chakra-UI. So, I referred to the chakra-UI [docs][1].
However, the change could not be reflected.
My ```theme.ts``` and ```App.tsx``` are below.
theme.ts
import { extendTheme } from "#chakra-ui/react";
const theme = extendTheme({
fonts: {
heading: "Ubuntu-mono",
body: "Ubuntu-mono",
},
styles: {
global: {
body: {
backgroundColor: "black",
color: "white",
}
}
}
})
export default theme;
App.tsx
import * as React from "react"
import {
ChakraProvider, Container,
} from "#chakra-ui/react"
import {BrowserRouter} from "react-router-dom";
import theme from "./theme/theme";
import '#fontsource/ubuntu-mono/700.css';
import {Router} from "./router/Router";
export const App = () => (
<ChakraProvider theme={theme}>
<BrowserRouter>
<Router/>
</BrowserRouter>
</ChakraProvider>
)
Of course, I have run npm install with the package.json that includes the "#fontsource/ubuntu-mono": "^4.5.6" line in its dependencies.
I also referred to another doc of the chakra-UI, however, I could not find out describes regarding this problem.
Although, this may an easy problem, anyone who gives me a solution.
I'm guessing this has to do with the environment. I tried it initially in CodeSandbox but the font didn't load but when I ran it locally using Vite app, it worked just fine.
What environment are you working in? See my repo here: https://github.com/estheragbaje/test-fonts
I have this weird issue where there is a Transparent Black Overlay on top spanning the full width and height of the screen, but once you scroll it goes away. I tried with and without the React Navigation and it seems to only appear when using it?
Update:( I found this div causing the overlay... but it it nowhere in my code?)
Any Clue how to remove it?
Example of the overlay below
and the code? Am I missing something?
I found the answer on GitHub... and it seems to work
import React from 'react';
import { NavigationContainer, DefaultTheme } from '#react-navigation/native';
const MainNavigator = () => {
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: '#FFF',
},
};
return (
<NavigationContainer theme={MyTheme}>
...
</NavigationContainer>
);
};
export default MainNavigator;
I am using react-navigation #4.0.5 with react-navigation-stack #1.8.0.
I am setting a header property defaultNavigationOptions present in createStackNavigator method in order to set the default header in multiple screens.
Things work fine I am able to render the header correctly but I can't use hooks like useState in the code of my Header Component.
Below are snippets of how I am using createStackNavigator and createSwitchNavigator respectively.
const ContentStackNavigator = createStackNavigator(
{
Search: SearchScreen,
Result: ResultScreen
},
{
initialRouteName: 'Search',
defaultNavigationOptions: {
header: Header
}
}
)
const SwitchNavigator = createSwitchNavigator({
Init: Screens.Init,
Content: ContentStackNavigator
},
{
initialRouteName: 'Init'
})
My Header is just a plain functional component(take this as a reference).
import React, { useState } from 'react';
import { Text } from 'react-native'
export default (props) => {
const [myState, setMyState] = useState(false);
return (
<View>
<Text>Hello</Text>
</View>
)
}
Below are the logs:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I know the above error is related to version mismatching and incorrect usage of hooks so I had tested the above things already. All other components seem to be working so I highly suspect this is related to the react-navigation library and its header.
Correct me if I am doing something wrong and what is the way around?
As mentioned by #ashwith in comments, I needed to pass:
const ContentStackNavigator = createStackNavigator(
{
...
},
{
initialRouteName: 'Search',
defaultNavigationOptions: {
header: <Header /> //instead of just Header
}
}
)
Note: Navigation props would not be passed in the Header component directly with this approach so I'd use the following:
...
header: props => <Header {...props} />
...
I hope this helps someone in the future.
My App.js file was getting very large, so I decided to move out all my classes to their own separate file, and this is what remains in my App.js
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { TabNavigator } from 'react-navigation';
//screen imports
import RecentChatScreen from './RecentChatScreen';
import AllContactsScreen from './AllContactsScreen';
import ChatScreen from './ChatScreen';
import HomeScreen from './HomeScreen';
import InfoScreen from './InfoScreen';
const MainScreenNavigator = TabNavigator({
Home: { screen: HomeScreen },
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
const NavTest = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
Info: { screen: InfoScreen }
});
I think that looks fine.
However in some of the class files, I need to reference those other screens in button events, like this:
onPress={ () => navigate('Home')}
This worked fine before when everything was in App.js, but how would I reference these screens(Home, Chat, Info, Recent, All) now in the their separate files when the definitions are in App.js?
Thanks!
You can export them in App.js:
// App.js
// ...
export {
MainScreenNavigator,
NavTest,
}
And then import them from it:
import {MainScreenNavigator, NavTest} from './path/to/App.js';
If your intent is just to navigate to the different screens, and not use any properties defined within a particular screens class, then you would not need to import anything. When you define the StackNavigator and lets say you are passing in that value into the AppRegistry as the entry point of the application. In your case, it could be something like this:
AppRegistry.registerComponent('NavTest', () => NavTest)
Now within any of the screens, the navigatation object is passed in as a prop. You can then use that to navigate to any of the defined screens. The initial setup of the StackNavigator is essentially a mapping from a routeName to a react component (a class). So when you want to navigate to a particular class, all you need is the name of the route not the class or component it represents, the navigator already has all that. This name would be the key passed into the StackNavigator for a particular screen. In your example, the routeNames are Home, Chat and Info. So just doing something like this would work:
const { navigate } = this.props.navigation;
return (
<View>
<Text>Navigate Test</Text>
<Button onPress={() => navigate('Chat')} title="Go to chat"/>
</View>
);