I want to render a list in a view of specific height with scroll feature, I tried using ScrollView, this works perfect in iOS but the scroll is not working in Android.
<ScrollView
style={{
position: "absolute",
width: "125%",
maxHeight: scale(100),
opacity: 1,
elevation: 100,
marginTop: scale(50),
backgroundColor: themes.snuff,
borderRadius: scale(12),
}}
nestedScrollEnabled
>
{listItems.map((item: any, index: number) => {
return renderItems(item, index);
})}
</ScrollView>
Above is the code, where renderItems is a function which renders a normal text.
If I remove position: "absolute" from the style, the scroll works in android as well, but in my usecase I need the position: "absolute" to render the view at correct position on UI.
Can someone please help here? I tried various solutions that I found on internet, but no luck.
Related
I need to add a shadow only on the bottom of a component for and android device (expo reac native)
I get it always on the 4 sides.
list: {
display: "flex",
position: "relative",
borderRadius: 5,
margin: 10,
backgroundColor: "#fff",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 3,
},
I am trying something like this in my styles but only seems to work: elevation and shadowColor, the rest of the shadow styles do not seem to do anything in my android emulator (maybe in ios it does)
you are correct,
for android the only property available is elevation
rest all properties are ios only. you can check here RN- shadow- props
For ios it will be very easy to add shadow at bottom by just passing
shadowOffset:{
height:-20 // whatever you wanna have
}
But for android, you need to have external packages for it to work like rn-shadow-2
Hope it helps. feel free for doubts
I am working on a react native project made using react native cli. The problem is that the TextInput gets highlighted when the keyboard is visible/active & it squeezes the view and mess up the layout which reminded me of KeyboardAvoidingView behaviour. Even though I don't use KeyboardAvoidingView in this project because all text inputs are in the upper half of the screen so they won't get covered by the keyboard.
<TextInput
style={styles.inputText}
multiline={false}
onSubmitEditing={() => Keyboard.dismiss()}
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
onChangeText={numberInputHandler}
value={enteredValue}/>
inputText: {
borderBottomColor: "white",
borderBottomWidth: 2,
width: "30%",
position: "absolute",
bottom: Dimensions.get("window").height / 5,
left: Dimensions.get("window").width / 5,
color: "white",
fontSize: Dimensions.get("window").height * 0.03,
fontFamily: "Lato-Regular"
}
React Native Ver 0.61.5
Testing was done on an Android emulator and an Android physical device
As I can see you are using absolute positioning where bottom uses Dimension api to get the height. The problem occurs due to this. Try giving static height rather then fetching from Dimension because when keyboard appears visible window gets shrink causing react to re-render because height changes.
position: "absolute",
bottom: Dimensions.get("window").height / 5,
Solution provided by Nikosssgr:
In AndroidManifest.xml
android:windowSoftInputMode="adjustResize" changed it to "adjustNothing"
I have a TouchableOpacity inside of a view. The view is small (height: 60) and the TouchableOpacity lies outside the bounds of its parent (position: absolute, top: 70). When the child is inside of the parent, i.e. top: 30, it's clickable, but when it's outside, it's not. And only the regions inside of the parent view are clickable (touch events pass through the regions out of bounds).
Does anyone know of a way to register TouchableOpacity clicks even when it's outside the bounds of its parent?
Note that this works on iOS. It seems to only be a bug on android.
<View style={{height: 60, width: '100%', zIndex: 1}}>
<TouchableOpacity onPress={() => console.log('pressed')} style={{position: 'absolute', zIndex: 2, backgroundColor: 'yellow', width: 100, height: 50, top: 70}} />
</View>
The best workaround so far is to
import { TouchableOpacity } from 'react-native-gesture-handler';
Solution was found here.
I use the TabNavigator from react-navigation and have in one Tab a swipeable Component (SwipeRow component from NativeBase). When swiping left or right on that component it shows context menu, so I disabled the swiping Ability from the Tabs in android (iOS is false by default) by declaring swipeEnabled: false in TabNavigator. Well, TabSwiping is now disabled, but all of a sudden, the context menu is not rendered correctly anymore. On Android with swipeEnabled: true and iOS everything works fine!
Screenshots (Card Element swiped to the left):
Android with swipeEnabled: false
iOS (correctly)
Code:
<SwipeRow
leftOpenValue={100}
rightOpenValue={-100}
left={<View style={{flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
marginTop: 7,
marginBottom: 7,
marginLeft: 3,
marginRight: 3,}}>
<Button>...</Button>
<Button>...</Button>
</View>}
body={<Card > ... </Card>}
right={/* similar to `left` */}
style={{backgroundColor: 'transparent',
padding: 0,
paddingRight:0,
paddingLeft:0,
paddingTop:0,
paddingBottom:0,
margin: 0,
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
borderBottomWidth:0,
flex: 1,
}}
/>
Any ideas why this is happening? Can I disable TabSwiping another way or can I style the menu differently so it gets renders correctly with swipeEnabled: false on android?
I am now pretty sure it is a styling issue. Adding a fixed height to SwipeRow style-prop fixes the problem, flex: 1 (see above) makes the context menu expand over the whole display height. Nevertheless, I dont know what the height of the content will be. For now I try to calculate it pretty close, but I was happier with the solution before swipeEnabled: false. What does disabling this option do to the overall NativeBase Content, Container or Tab component?
I am simply trying to take a square image and contain it within a circle in my react-native app on Android. A circle image basically.
<View style={mainStyle.profileImageContainer}>
<Image
style={mainStyle.profileImage}
source={{uri: CONFIG.media_url+this.props.image}}
resizeMode="cover"
/>
</View>
and styles:
profileImageContainer: {
translateY: -43,
alignSelf: 'center',
},
profileImage: {
resizeMode: 'cover',
height: 86,
width: 86,
borderWidth: 2,
borderRadius: 75,
overlayColor: CREAM,
},
But the only way to get it remotely circular on Android is to add the "overlayColor", but I need this to be transparent so the design behind is visible. The property transparent does not work.
Does anyone have any ideas how to achieve this? Am I missing some sort of simple property?
EDIT: Thanks to Dhruv Parmar's answer, I realised the issue is because I was using a GIF image. The method you would expect seems to work fine with jpgs and pngs, but not GIFS!
You don't need to have a wrapping view to achieve this, simply using borderRadius set to half of image size should do the trick. Any other styles you want can be applied directly to Image view
You can see an example here https://snack.expo.io/rJI4DzoDW
Use this style;
image: {
width: 150,
height: 150,
borderRadius: 150 / 2,
overflow: "hidden",
borderWidth: 3,
borderColor: "red"
}