I am using the native-base button and trying to download the image by pressing the button. It's is working perfectly fine in IOS but not working in Android. Here is my code
<View
style={{
marginVertical: hp("2%"),
marginHorizontal: wp("15%"),
textAlign: "center",
width: "100%",
}}
>
<Button
onPress={() => downloadFile()}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
<Text
style={{
color: "black",
fontSize: RFPercentage(2.1),
fontFamily: "BalsamiqSansBold",
}}
>
ADD TO PHOTOS
</Text>
</Button>
</View>
The downloadFile() function is called in IOS when the button is being pressed but it's not working in the case of Android.
I also tried console logging on press like this
<Button
onPress={() => console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
It's working in IOS but not in the case of Android.
Also if I directly call the function on onPress like this in Android it automatically logs Button Clicked without being pressed. I tried to figure all the possible ways to resolve it but I am not getting the exact cause of this issue.
<Button
onPress={console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
Maybe you are facing an issue regarding TouchableOpacity in android.
You can import ToucahableOpacity from 'react-native-gesture-handler' and hopefully this will help a lot.
You can import like this
import {TouchableOpacity} from 'react-native-gesture-handler'
import {TouchableOpacity } from 'react-native'
<TouchableOpacity
style={styles.button}
onPress={handleSaveLimitValue}
>
<Text
color={colors.white}
weight={TextWeight.DEMI_BOLD}
size={16}
style={styles.buttonText}
>
Save
</Text>
</TouchableOpacity>
Using TouchableOpacity of native module worked for me instead of using import {BaseButton} from react-native-gesture-handler
Hope my answer may help you.
Related
When using react-native-pdf and the example uri provided it does not appear in my app. A loading bar is only displayed. Does anyone know what may be causing this issue?
Loading bar displayed underneath messages:
Code below:
return <SafeAreaView style={{ flex: 1}}>{chat}
<View style={styles.container}>
<Pdf
source={{uri:'https://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true}}
onLoadComplete={(numberOfPages,filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
onPressLink={(uri)=>{
console.log(`Link presse: ${uri}`)
}}
style={styles.pdf}/>
</View>
</SafeAreaView>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex:1,
width:Dimensions.get('window').width,
height:Dimensions.get('window').height,
}
});
I'm experiencing a lot of difficulty trying to implement a "double modal", i.e. two modals at the same time.
e.g.
I'm using Overlay from the 'react-native-elements' library to achieve the modal effect, however, putting two of them together in a view isn't working as it will only display the first one. I'm also finding that directly setting the height of the overlay isn't having any effect.
I then considered creating a custom component but can't figure out how to dim the background using CSS.
If you want, change the your element modal to react-native-modal. Keep try and execute the below code. I hope it'll work for you.
import Modal from 'react-native-modal';
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
<TouchableOpacity onPress={toggleModal}>
<Text>Button Text</Text>
<Modal
isVisible={isModalVisible}
onBackdropPress={() => setModalVisible(false)}>
<View style={{ backgroundColor: 'white', padding: 20, height:250 }}>
<Text>First box content appear here</Text>
</View>
<View style={{ backgroundColor: 'white', padding: 20, height:100, marginTop: 30 }}>
<Text>Second box content appear here</Text>
</View>
</Modal>
</TouchableOpacity>
Like the title says, I want to ask if there's a way to create a button with gradient color and an icon in React Native? I know that gradient color can't be added without an external library, so I tried this one:
https://www.npmjs.com/package/react-native-gradient-buttons
However, I can't see a way to add Icon as a props to the gradient buttons of this library. The answer doesn't have to use the library, I would just like to know a convenient way to achieve the button I described. Thanks.
You can create your own button with an icon like below
import { Ionicons } from '#expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
const GradientButton = ({ onPress, style, colors, text, renderIcon }) => {
return (
<TouchableOpacity onPress={onPress}>
<LinearGradient colors={colors} style={style}>
{renderIcon()}
<Text style={styles.text}>{text}</Text>
</LinearGradient>
</TouchableOpacity>
);
};
Usage would be
<GradientButton
onPress={() => alert('Button Pressed')}
style={{
padding: 15,
alignItems: 'center',
borderRadius: 5,
flexDirection: 'row',
}}
colors={['#874f00', '#f5ba57']}
text="Press"
renderIcon={() => (
<Ionicons
name="md-checkmark-circle"
size={20}
color="green"
style={{ marginHorizontal: 20 }}
/>
)}
/>
You will have more control over the button and change it anyway you want, you can add more props to customize it the way you want.
You can try out the demo here
https://snack.expo.io/#guruparan/gradientbutton
The above icon and gradient packages are for expo
You can use RN Vector icons and Linear gradient package as well
In the docs of the package you provided it shows an example like this:
<GradientButton
style={{ marginVertical: 8 }}
textStyle={{ fontSize: 20 }}
gradientBegin="#874f00"
gradientEnd="#f5ba57"
gradientDirection="diagonal"
height={60}
width={300}
radius={15}
impact
impactStyle='Light'
onPressAction={() => alert('You pressed me!')}
>
Gradient Button #2
</GradientButton>
Maybe try adding your icon in between the tags instead of as prop?
I have a problem with styling 3 nested components.
Background:
I want the user to enter tags. On testing it became clear, that many user, didn't know that they have to press space to save the tag (a problem, when a user only wants to enter one tag).
As a solution, as soon as the user presses on the textinput I want to display a trailing hint, to press space to save (leertaste zum speichern = space to save), which is displayed after the userinput.
The problem is as seen on the gif
https://gfycat.com/harmoniousgorgeousdikkops
The textinput grows and the hint stays behind the text, as expected, but at some point my hint is leaving the container component, while my textinput behaves normally.
Expected behavior is that the hint is always visible and the textinput grows as long as this is given (thus never pushing the hint out of the screen, or changing it's design). Visually it is when I pause during the gif.
Code:
<View
style={{
flexDirection: 'row',
backgroundColor: COLOR_GREY_BACKGROUND,
borderRadius: BORDER_RADIUS,
height: TEXTINPUT_HEIGHT,
marginRight: MARGIN_TO_DISPLAY_EDGE,
width: DIMENSION_WIDTH - 2 * MARGIN_TO_DISPLAY_EDGE,
flexWrap: 'nowrap',
}}
>
<Text
style={{
fontSize: FONT_SIZE_TEXT_INPUT,
...FONT_OPENSANS_SEMI_BOLD,
paddingTop: 1,
paddingRight: 0,
marginLeft: 5,
}}
>
#
</Text>
<View style={{ flexDirection: 'row', flex: 1 }}>
<TextInput
style={[styles.textInputText]}
placeholder={placeholder}
onChangeText={(text) =>
onChangeText(text.toLowerCase())
}
value={value}
autoCapitalize="none"
autoCorrect={false}
onFocus={() => setTextInputFocus(true)}
/>
<View style={{ justifyContent: 'flex-end' }}>
<Text
style={[
styles.textInputText,
{
paddingLeft: 0,
fontSize: FONT_SIZE_SECONDARY_TEXT,
color: COLOR_GREY_TEXT_BACKGROUND,
},
]}
>
{T('spaceToSave')}
</Text>
</View>
</View>
</View>
the missing style :
textInputText: {
fontSize: FONT_SIZE_TEXT_INPUT,
...FONT_OPENSANS_SEMI_BOLD,
//paddingRight: TEXTINPUT_PADDING,
paddingTop: TEXTINPUT_PADDING,
}
(The # is added so its clearer for the user what to do without having him to enter it). Should it be unclear, what I am trying to do, please let me know.
Thanks a lot for your help!
I am trying to center an Image within a View both horizontally and vertically the problem is that no matter what I put in the code it still seems to be in the same position all the time. I have this code for another View from another screen and it's exactly how I need it to be, however for the other pages it's not responding.
Here is my code:
<View style={styles.header}>
<Icon
raised
name='chevron-left'
type='octicon'
color='#f50'
onPress={() => this.props.navigation.goBack()}
containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
<Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignItems:'center', marginTop:30, position:'absolute'}}/>
</View>
const styles = StyleSheet.create({
header:{
backgroundColor:'#ff4714',
height:SCREEN_HEIGHT/8,
flexDirection: 'row'
}
});
EDIT: I've removed all the styling for the <Image> except for width and height and the image stays at the same place. I don't know what to make of this
Here is an expo snack https://snack.expo.io/SyCO!ree8
You need to add justifyContent:'center' and alignSelf:'center' to your image style,
Just check the code :
<View style={{
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}}>
<Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50,alignSelf:'center'}} />
</View>
And this is expo snack : expo-snack
UPDATE:
HERE IS MY UPDATED EXPO SNACK:
check here
Hope it helps
Try adding:
alignItems: 'center',
justifyContent: 'center'
to your header style
You might also need to add flex:1, depending on the state of your View