I create a custom font based on this tutorial and everything works ok with the new CustomIcon tag, but, when I use it on a FooterTab, and I want to add a Badge, this last component doesn't work properly, and the Badge position is wrong, just this image:
The Button in the FooterTab seems like:
<Button badge vertical>
<Badge>
<Text>
8
</Text>
</Badge>
<CustomIcon style={{fontSize: 30}} name='logros_desactivada' />
<Text>
Logros
</Text>
</Button>
The CustomIcon import looks like:
import CustomIcon from '../config/CustomIcon';
And the CustomIcon file imported above is:
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../../assets/selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);
I tried many ways to locate the Badge in a correct form, but nothings works.
There is another solution?, thanks
Related
I am using react native Expo
From the library react-native-paper/checkbox-item Link
I got the clickable label feature in which by clicking on the text the checkbox gets checked.
I got the tag Checkbox.Itemcode from this Expo Snack Link
<Checkbox.Item label="Item" status="checked" />
But in this, how do I put label after the checkbox ?
Like [ checkbox ] Label
For that, I would suggest to make a custom component for CheckBoxes
Create a file called CheckBox.js, it should look like this
import * as React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Checkbox } from 'react-native-paper';
function CheckBox({ label, status, onPress }) {
return (
<TouchableOpacity onPress={onPress}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Checkbox status={status} />
<Text style={{ fontWeight: 'bold' }}>{label}</Text>
</View>
</TouchableOpacity>
);
}
export default CheckBox;
Then use it as this whenever required.
import CheckBox from './CheckBox'; // Make sure you import it correctly
<CheckBox label="Name" status="checked" onPress={null} />
Working Example
Maybe a way too late reply, but there is a prop called "position" in the Checkbox item which can take "leading" or "trailing" value. The default is trailing and if you set it to "leading", the checkbox will be put before the label.
My HomeHeader component is like this:
import React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";
export default function HomeHeader({ navigation }) {
return (
<View style={styles.home_header}>
<Icon
style={styles.menu}
name="bars"
size={30}
color="white"
onPress={navigation.toggleDrawer()}
/>
<Image
style={styles.header_logo}
source={require("../assets/logo.png")}
/>
<Text>Hello</Text>
</View>
);
}
And am using it in my Home screen like this:
return (
<View>
<HomeHeader navigation={navigation} />
</View>
)
But am receiving this error message:
Warning: Cannot update a component from inside the function body of a
different component.
What am trying to do is, I have separated out the header section of my HOME screen into a separate component called HomeHeader. And in this component, am attaching the event handler to toggle the opening/closing of the DrawerNavigation (left side drawer menu)
If I create a Button in my HOME screen and add the event handler to toggle the drawer, it works fine. But the issue happens only if I try this from inside my HomeHeader component.
Btw, am using ReactNavigation v5 and I even tried this method: https://reactnavigation.org/docs/connecting-navigation-prop/
No luck so far.
Change onPress={ navigation.toggleDrawer() } to onPress={ ()=> navigation.toggleDrawer() }
You can read more about this in here
So, i was trying to do a fade animation using react-native-animated API but unfortunately it does'nt gets animated when i try to render it on my android device. It just dont animate anything and screen is also blank but after sometime(say 30-40 secs) the text shows up with no animation. If i don't apply Animated.View than text shows up immediately or you can say normal rendering of content. Can anyone find what i am doing wrong with this code or what else should i add to make this work.
react-native-animatable version : 1.3.3
import React, { Component } from 'react';
import { Text, View, ScrollView } from 'react-native';
import { Card, } from 'react-native-elements';
import * as Animatable from 'react-native-animatable';
function History() {
return(
<View>
<Text style = {{margin:10}}>
Started in 2010, Eatsy quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.
</Text>
</View>
);
}
class Test extends Component{
render()
{
return(
<ScrollView>
<Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
<Card title ='Our History'>
<History />
</Card>
</Animatable.View>
</ScrollView>
);
}
};
export default Test;
Ok so now I got to know the solution after browsing internet for hours, you just have to add useNativeDriver='true' inside <Animatable.View> just like this:
<Animatable.View animation="fadeInUp" useNativeDriver='true' duration={2000} delay={1000}>
I simply import Modal from react-native and run simple test.
I found out that if I reload with <Modal visible={true}> it just crash my app. It wont reload until I re-open it, it works perfectly fine when reload with visible={false}
import React , {Component} from 'React';
import {View,Modal,Text} from 'react-native';
export default class Test extends Component{
render(){
return(
<View>
<Modal visible={true} >
<Text>Before Reload</Text>
<Text>when reload only Before reload show up ,no-error or any information</Text>
</Modal>
</View>
)
}
}
!Update. Found out it's a feature. gonna leave it here in case beginner facing the same problem
Why do you want you modal to be opened by default in a class.
Only make the modal open when you need that i.e on button press etc. If it's open by default try rendering a class instead of a modal
import React , {Component} from 'React';
import {View,Modal,Text} from 'react-native';
export default class Test extends Component{
render(){
return(
<View>
<Modal visible={this.state.modalVisibile} > //This is boolean value and update it's value on a button press.
<Text>Before Reload</Text>
<Text>when reload only Before reload show up ,no-error or any information</Text>
</Modal>
</View>
)
}
}
Also, if the modal is opened by default it will cause many issues
I am using Firebase Server on Node together with RN. I wanted to use GetStream.io in my app. The backend works fine, but an example from GetStream.io documentation for frontend doesn't work, I just get this error.
I tried to insert attribute though it doesn't exist in GetStream.io example. I still receive this error.
This is how my code looks like:
import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import { StreamApp } from 'react-native-activity-feed';
import { Text, View } from "react-native";
const newsFeed = () => {
return (
<View>
<SafeAreaView style={{flex: 1}} forceInset={{ top: 'always' }}>
<StreamApp
apiKey="myapikey"
appId="myappid"
token="mytoken"
/>
</SafeAreaView>
</View>
);
};
export default newsFeed;
https://getstream.io/react-native-activity-feed/tutorial/ link to official guide from GetStream.io
Based on the error message, it seems like your newsFeed component is rendered inside a Text element.
Here's the link to the check in RN that raise this error -> https://github.com/facebook/react-native/blob/master/Libraries/Components/View/View.js#L44
Eg. this JSX code would trigger the same error:
<Text>
< newsFeed />
</Text>
Assuming this is the case (or a variation of it) you can fix this problem very easily by wrapping your component in a <View> and remove <Text> when not necessary.
So what I found out.
The problem was because of this line:
import SafeAreaView from 'react-native-safe-area-view';
What you should do is following:
import { SafeAreaView } from "react-native";