I'm using a SnackBar from React Native Paper that is displayed at the bottom of my app:
But I want to display this snackbar at the top of the screen. I tried to do it using styled components:
export const ConfirmSnack = styled(Snackbar)`
top: 0;
`;
But that does not do the trick, even when adding position: absolute; I've read the docs but can't find anything on positioning the snackbar. How can I show this snackbar at the top of the screen?
Here's what worked for me.
<Snackbar wrapperStyle={{ top: 0 }} visible={true}>Casis added to basket</Snackbar>
wrapperStyle
Style for the wrapper of the snackbar
Here's expo link which would toggle the vertical alignment
Link to [documentation] of React Native Paper Snackbar (https://callstack.github.io/react-native-paper/snackbar.html#wrapperStyle)
Related
I'm trying to right align my header title in my react native app but can't seem to do so. In react navigation, you can set headerTitleAlign prop only to center and left. I try to use headerRight and remove headerTitle but the default title kicks in which is the name of the screen.
Had a search online but no answers has cropped up.
Wrap your header inside a view. And pass this style ={{alignItems: 'flex-end', alignContents: 'flex-end'}}
I tried to transparent navbar on current page in react native router flux but i found an issue that previous navbar is gone
expected: current page not showing navbar and previous navbar stil showing when current page navbar is transparent
before:
after:
How to do this ?
Try
Stack key=... hideNavBar={true}
I am beigner to React Native Mobile App . Develop Login Screen where i have stuck with Chrome Autofill yellow color .
<Input
placeholder={placeholder}
placeholderTextColor={
Style
const styles = StyleSheet.create({
textInputStyle: {
Please let me know , how to remove autofill yellow color in react native .
Some of the post say
#1.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
#2.autocomplete="off"
Please give some Sample link for the above issue.
In react-native we have a prop autoCompleteType to disable this. might below code help.
<TextInput
autoCompleteType="off"
/>
for more help, please see https://reactnative.dev/docs/textinput#autocompletetype
I have a materialTopTabNavigator in my app and one of the screens needs to have the swiping between tabs gesture enabled on only part of the screen (for example, from the bottom of the screen to 200 from bottom). I think I should be able to do this with gestureHandlerProps prop of the materialTopTabNavigator, but it doesn't seem to work. This prop allows you to pass props to the underlying PanGestureHandler. Here is what I am passing as gestureHandlerProps and the link to the PanGestureHandler docs:
gestureHandlerProps={{
maxPointers:1,
failOffsetY:height-200,
hitSlop: {left:0, right:0, top:0, bottom:200}
}}
//height is height of screen
Link to PanGestureHandler Docs: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-pan
I figured out how to do this using the common handler props listed in the react-native-gesture-handler docs. I used the hitSlop prop and passed it an object with height and top properties as follows. This was passed to my material top tabs navigator gestureHandlerProps prop.
gestureHandlerProps={{
maxPointers: 1,
hitSlop: {height: 100, top: 0}
}}
This allows the underlying PanGestureHandler of the material top tabs navigator to only be activated from 100 points from the bottom of the screen.
Link to common handler props: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-common
I'm working with the React Native Web and React Native Paper library with Styled Components. Basically I would like to customize the TextInput inner components: Label and html input
The questions are:
1) How to change Label styles? eg. width\size\color, etc. ?
2) How to change html input styles? I want to set outline: none to prevent the blue border show on focus in the case of browser.
I understand that in the case of native we don't have html and the native-web transpiles it.
And I can't understand how to catch the nested label component to change its styles. Because I want to show gray label when non-filled, violet when filled and the Input text should be black.
In the case of the web, it's trivial but in the case of native, I don't know how to handle it.
So is that possible at all?
Thanks for any help. Here is the code example
import React from 'react';
import {
View,
Platform,
} from 'react-native';
import {
TextInput as NativePaperInput,
withTheme,
} from 'react-native-paper';
import styled from 'styled-components/native';
const NativePaperInputThemed = withTheme(NativePaperInput);
export const TextInputStyled = styled(NativePaperInputThemed)`
${(props: any) => {
return `
outline: none; // doesn't work
input: { outline: none; } // doesn't work
& input: { outline: none; } // doesn't work
// Label change style ?
color: ${props.theme.theme10x.palette.typography.placeholder}; // doesn't work
border-color: '#f92a2a8a'; // doesn't work
height: 52px;
`;
}
}
`;
P.S. Basically even colors and fontFamily doesn't work somehow
label={<Text style={{fontSize: 20}}>{t('PersonalDetailsYuvitalOrg:editInput.firstName')}</Text>}
Some guy tried to change label style manually, the maintainer reponse:
You can pass fontSize via style prop. However it will affect both
label and input text. There is no way to change only one of them.
https://github.com/callstack/react-native-paper/issues/1505
You can pass a component for the label prop. For Example:
export const Input = styled(TextInput).attrs({
dense: true,
activeUnderlineColor: theme.colors.ui.blueDark,
label: <Text style={{fontSize: 50}}>My Custom Label</Text>
})`
width: 100%;
height: 50px;
font-size: 16px;
`
However, I have not looked for a way to control the scale when the animation occurs.