I want to create in form in react native which has material input text.
same like shown here https://material.angular.io/components/input/overview
Here is my code
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-
native";
export default class App extends Component<Props> {
render() {
return <TextInput style={styles.abcd} placeholder="Enter name" />;
}
}
const styles = StyleSheet.create({
abcd: {
borderBottomWidth: 0.25,
marginVertical: 2,
paddingHorizontal: 10
}
});
Here, I have used a placeholder, but if you see the form in the given link, then it's not placeholder. Also, the text is moving in an upward direction, when we are clicking on the field. The same thing I want to achieve here.
I don't want to use any libraries like textField or any other library.
The placeholder prop on TextInput components has the place-holding text disappear upon the start of input. To achieve what you want to do, you can overlay a Text component over your TextInput component and map its style to a state variable. Upon focus, change the Text component's styling accordingly.
Buddy,
There are two things
1. React-Native material input box is only available in Android by default.
2. On iOS, (iPhone or iPad) you will see normal InputBox
To see the material input box on iOS devices, you have to do lots of coding. The best solution is to integrate third-party libraries like react-native-paper
Please refer a working example over here with react-native-paper library
https://github.com/callstack/react-native-paper/blob/master/example/src/TextInputExample.js
Related
Im building a project in react native and tailwind. For every text component, I am passing "text-black".
<Text style={tailwind('text-black')}> Hi </Text>
Can I set the default color for text component to be black somewhere to overcome this problem ?
You'll want to create a custom component that wraps the Text component and applies the default style you want.
import React from 'react';
import { Text } from 'react-native';
const DefaultText = ({ style, children }) => (
<Text style={[tailwind('text-black'), style]}>{children}</Text>
);
export default DefaultText;
Now, whenever you want to use a Text component and have it automatically be styled with the default color, just use the DefaultText component instead.
I have included a snack expo here that reproduces the exact layout of my project. App.js -> stack of screens. I am trying to figure out the best way to toggle between light theme and dark theme. I do not care for the ios dark theme setting to trigger this, for now, I just want the button to trigger it.
I would like there to be a button displayed on my home screen that when pushed toggles to the theme it is not currently on. I originally wanted to use theme provider to set my colors for each theme and then call that color on each page rather than the hard coded color but have failed to do so.
When you have a stack of screens being called in a tab navigator, what is the best way to use a dark theme?
You need to use the theme prop of the NavigationContainer but your are still responsible for providing the styling for each of your components.
That said, there are a couple of things we need to do here.
Let the button change the theme prop of the NavigationContainer.
Provide a custom styling (colors etc.) for all of your components depending of the theme.
We can solve the first problem by wrapping the NavigationContainer into a ContextProvider as follows.
import React, {useState} from 'react';
import {
DefaultTheme,
DarkTheme,
NavigationContainer,
} from '#react-navigation/native';
export const ThemeContext = React.createContext();
export default function App() {
const [theme, setTheme] = useState(DefaultTheme)
return (
<ThemeContext.Provider value={{theme, setTheme}}>
<NavigationContainer theme={theme}>
</NavigationContainer>
</ThemeContext.Provider>
);
}
In your Toggle component you can then change the theme dynamically as follows.
import {ThemeContext} from '../App'
import {
DefaultTheme,
DarkTheme,
} from '#react-navigation/native';
const Toggle = (props) => {
const { setTheme, theme } = React.useContext(ThemeContext);
return (
<TouchableOpacity onPress={() => setTheme(theme === DefaultTheme ? DarkTheme : DefaultTheme)}>
</TouchableOpacity>
);
}
You will notice that changing the theme will not change anything in your current setup. This is because you need to take care of this yourself.
This could be done using either the context again or the useTheme hook. For your HomeScreen this could be done as follows.
import { useTheme } from '#react-navigation/native';
const Home = () => {
const { colors } = useTheme();
return (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: colors.background}}>
<Toggle/>
<Screen/>
</View>
);
}
Toggling the button changes the theme now. You can access the default theme colors using the useTheme hook but you still need to apply it to your components. You could also provide a custom theme which is done similar.
I would suggest doing something similar to this:
https://www.section.io/engineering-education/how-to-control-dark-mode-in-react-native-using-redux/.
In the article the author uses React Native Paper to control what each of his screens look like. I personally have a theme.js file that has an if statement based on what my Redux state is set to. If it is to light mode, my global theme variables (e.g. background color, text color, etc.) are set to their respective light colors. When set to dark mode, my global theme variables are set to their respective dark colors.
I Am working on this to implement Dark Mode in React Native using React Navigation. but it changes only the bottom bar navigator not the screens inside that. can you help me with this
Snack Code
https://snack.expo.io/#belgin/news-app
You're responsible for styling inside your own components. You're styling background as light, setting navigation theme to dark is not gonna magically change the colors you have defined.
For changing themes to work for your components, you need to use the useTheme hook to set colors in your own components instead of hardcoding them.
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '#react-navigation/native';
function MyScreen() {
const { colors } = useTheme();
return (
<View style={{ flex: 1, backgroundColor: colors.background }}>
{/* screen content */}
</View>
);
}
https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components
Other method is that, you can also create a state which can store your current view-mode (light/dark mode). This is very simple to implement using react-redux. You can refer this video to get better understanding of react and redux.
This is far more simpler implementation of redux.
Note - dependencies such as thunk, react-redux, etc etc are not installed in this video. You can identify which dependencies you're gonna need step-by-step by following error that came in your way. Eg. if createStore gives error try to import createStore as legacy_createstore like done in this question
Background
Pretty simple question: I want to create a "like" button in RN. To do this I have to separate components which are SVG files. One is just the outline of a heart, the other one is filled.
The screen in which I'm trying to build this button is a Function component so I should use hooks. I know about state but don't know how to properly use it.
What I need
A Touchable Opacity component which holds an onPress method which changes the image component when pressed.
Thanks a lot in advance!
import React ,{useState} from 'react';
import {TouchableOpacity } from "react-native";
export default function Like() {
const [isLiked,setIsLiked]=useState(false) ;
const handleLikePress=()=>{
setIsLiked(!isLiked)
}
return (
<TouchableOpacity onPress={handleLikePress}>
{isLiked? <FilledHeartSVG/>: <OutlineHeartSVG/> }
</TouchableOpacity>
)
}
by default, we are showing an outline of a heart SVG
when press event trigger we are changing isLiked state value
if isLiked is true then show filled heart SVG
if isLiked is false then show outline of a heart SVG
FilledHeartSVG and OutlineHeartSVG is just example use your SVG there
You can do something like below, here i have made a toggle for the text but you can change it to your image component, also the callback prop can be used if you want to use that outside the LikeButton
const LikeButton = ({callback}) => {
const [liked, setLiked] = React.useState(false);
return (
<TouchableOpacity onPress={()=>{
setLiked(!liked);
if(callback)
{
callback();
}
}}>
<Text>{liked?"Liked":"Like"}</Text>
</TouchableOpacity>
);
};
You can tryout this snack which uses icons
https://snack.expo.io/#guruparan/likebutton
I'm using react-native-navigation to show error notification dropdowns via 'showInAppNotification'.
I've tried to style the dropdown box with:
{
backgroundColor: colorRed,
flex: 1,
alignSelf: 'stretch',
}
I can't get the box to obey that flex call. It stays as the width of the text inside the notification.
That is, what I get is this:
And what I want is this:
(The second is achieved by setting a hard width of 999, but that isn't a satisfactory solution)
So, from my limited understanding of React Native's stylesheet logic, I assumed I had a parent element with a fixed width above the notification. Except I don't. It's called directly (well, unless I'm missing some sort of injected showInAppNotification component) into my Provider HOC, which looks like this:
<Provider store={store}>
<ErrorBoundary>
{children}
</ErrorBoundary>
</Provider>
To confirm the ErrorBoundary was fullscreen width, I threw a backgroundColor: green on the error boundary. It came back as the expected width, like this:
Any thoughts on what could be going on? As mentioned I'm new to react native & it's possible I'm missing something obvious w/regards to flex logic, but I suspect it's a react-native-navigator notification issue I'm hoping others have run into. Any thoughts appreciated.
Instead of giving your width a hard-coded value you can import react native's Dimensions class into your component and use it in order to set the width.
So, your code can look something like this:
import { ...., Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
const styles = {
notification : {
backgroundColor: colorRed,
width,
alignSelf: 'stretch'
}
}