When I use customized marker, the system starts to get heavy after a few processes. But if I use it without customization, there is no problem. I share a screenshot of my Marker's code, why I may have encountered such a problem.
So it's okay if I use the default marker. But if I designed it myself it works very slowly.
Number of Markers: 50
Library: react-native-maps, react-native-vector-icons/FontAwesome5
CLOSE:
tracksViewChanges={false} I solved the problem by adding Props to Marker
tracksViewChanges: Sets whether this marker should track view changes. It's recommended to turn it off whenever it's possible to improve custom marker performance.
renderListMarker = () => {
let { markerList } = this.props;
return (
markerList.map((item, index) => {
return (
<Marker
onPress={() => { this.selectMarker(index) }}
key={item._id}
coordinate={{
latitude: item.location.coordinates[0],
longitude: item.location.coordinates[1],
}}
>
<View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ marginBottom: -18, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ marginEnd: 2 }}>
<FontAwesome5 name="parking" size={24} color={this.state.marker === index ? "#3879f0" : "#000000"} />
</View>
{
item.empty !== false ? <View style={{ padding: 2, borderRadius: 2, backgroundColor: item.empty > 0 ? '#00cc96' : '#e63946', }}>
<Text style={{ color: '#ffffff', fontWeight: 'bold', fontSize: 12 }}>{item.empty}</Text>
</View> : null
}
</View>
<View style={{ justifyContent: 'center' }}>
<FontAwesome5 name="sort-down" size={30} color={this.state.marker === index ? "#3879f0" : "#000000"} />
</View>
</View>
</Marker>
)
}
)
)
}
enter image description here
Related
I was making an app and added text on HomeScreen. I am getting the text in Web but am not able to get it in Android and IOS. This is the Code:
render(){
let pulse = <Image source={require('../pulse.png')} style={styles.pulse} />
return (
<SafeAreaView style={styles.container}>
<View>
<StatusBar barStyle="dark-content" />
<View style={{ flex: 0.4, resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
</View>
</SafeAreaView>
}
These are the styles
container: {
flex: 1,
backgroundColor: 'white',
},
appName: {
alignSelf: 'center',
fontFamily: 'oswald',
fontSize: 50,
color: 'black',
height: '100%'
}
You need to remove the flex prop of the child view. Change
<View style={{ flex: 0.4, resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
to
<View style={{ resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
I'm with a problem with TouchableOpacity and Negative Margins inside a FlatList. On iOS works well, but on Android, when I click at the TouchableOpacity in the front of other TochableOpacity, the TouchableOpacity from behind fires. I don't know how to solve this.
iOS Image
I clicked at "Proposta 70" but fires "Proposta 78" from behind.
Android Image
The FlatList code
<View style={styles.containerList}>
<FlatList
data={proposalsList}
keyExtractor={item => item.proposta_id}
renderItem={({ item, index }) => (
<RenderItem
item={item}
index={index}
isLoweredCard={
openedCardIndex !== null && index === openedCardIndex + 1
}
changeOpenedCardIndex={changeOpenedCardIndex}
/>
)}
refreshing={loading}
onRefresh={() => getProposalsAndNotifications()}
/>
</View>
The RenderItem code
<TouchableOpacity
style={styles.container(index, isLoweredCard)}
onPress={() => changeOpenedCardIndex(index)}
>
<>
<View
style={[
styles.lineContainer,
{ marginBottom: metrics.padding * 1.5 },
]}
>
<View
style={{
width: '50%',
}}
>
<Text style={styles.proposalId}>
{`Proposta ${item.proposta_id}`}
</Text>
<Text style={styles.proposalDate}>
{dayjs(item?.proposta_data_criacao).format('DD.MM.YYYY')}
</Text>
</View>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
}}
>
<View style={styles.statusContainer}>
<Text style={{ fontSize: wp(4), fontWeight: 'bold' }}>
<TypeStatus status={item?.proposta_status} />
</Text>
</View>
</View>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Valor solicitado</Text>
<Text style={styles.proposalDetailValue}>
{formatCurrency(item?.proposta_valor_financiado)}
</Text>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Valor liberado</Text>
<Text style={styles.proposalDetailValue}>
{formatCurrency(item?.proposta_valor_financiado)}
</Text>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Parcelas</Text>
<Text style={styles.proposalDetailValue}>
{`${item?.proposta_valor_prazo}x`}
</Text>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Valor da parcela</Text>
<Text style={styles.proposalDetailValue}>
{formatCurrency(item?.proposta_valor_parcela)}
</Text>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={goToDetails}
title="Ver detalhes"
titleStyle={styles.proposalButtonText}
style={styles.button}
/>
</View>
</>
</TouchableOpacity>
And the style of items
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import { metrics, colors } from '../../../../constants';
const styles = StyleSheet.create({
container: (index, isLoweredCard) => ({
backgroundColor: `#00${index}F${index}C`,
marginTop: !isLoweredCard && index !== 0 ? -wp(53) : metrics.padding,
marginHorizontal: metrics.padding,
alignContent: 'center',
padding: metrics.padding,
borderRadius: metrics.radius,
zIndex: -(index + 999),
}),
lineContainer: {
width: '100%',
justifyContent: 'space-between',
flexDirection: 'row',
marginBottom: metrics.padding / 2,
},
statusContainer: {
backgroundColor: colors.white,
borderRadius: 20,
width: '70%',
paddingVertical: 3,
alignItems: 'center',
justifyContent: 'center',
},
proposalId: {
color: colors.white,
fontWeight: 'bold',
fontSize: wp(4.5),
},
proposalDate: {
color: 'rgba(0, 0, 0, 0.5)',
fontWeight: 'bold',
fontSize: wp(3.5),
},
proposalDetailLabel: {
fontSize: wp(4),
color: 'rgba(0, 0, 0, 0.9)',
},
proposalDetailValue: {
fontSize: wp(4.5),
color: colors.white,
fontWeight: 'bold',
},
proposalButtonText: {
color: colors.white,
fontWeight: 'bold',
fontSize: wp(4),
},
button: {
borderRadius: metrics.radius,
backgroundColor: '#002F6C',
paddingHorizontal: metrics.padding * 3,
},
buttonContainer: {
width: '100%',
marginTop: metrics.padding,
alignItems: 'center',
},
});
export default styles;
I encountered exactly the same problem on Android. My FlatList rendered items with negative margin to superimpose them on each other. The touchable on iOS is perfect but on Android it press the lowest item behind.
Finally I solved this by replacing
import { TouchableOpacity } from 'react-native';
with
import { TouchableOpacity } from 'react-native-gesture-handler';
Using react-native 0.63.4 and react-native-gesture-handler 1.9.0 in my case.
The only solution for my case was inverting the negative margin (top / bottom).
In my case the View component was with negative marginBottom and the touchable part that I wanted was on the bottom as well, so I inverted it and put the View inside the next component and gave a negative marginTop. So the part that I wanted to be touchable worked fine.
A little strange but for me it worked out well...
I am trying to get EXIF Metadata informations before capturing Image. I am using React Native Camera library for implementing camera and their properties for defaults settings. In my point of view after capturing only i am getting EXIF metadata value in both Android and iOS. React native camera documentation link.
render() {
return (
<View style={{ backgroundColor: 'transparent', flex: 1 }}>
<View style={styles.MainContainer}>
<StatusBar barStyle='light-content'></StatusBar>
<View style={[styles.TitleView]}>
<Text style={styles.title}>Camera</Text>
</View>
<View style={{
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: 'transparent',
marginBottom: 20,
}}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
onBarCodeRead={(code) => {
console.log('bar', code)
// if (this.state.barcode === '') this._onBarcodeRead(code)
}}
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.off}
whiteBalance={RNCamera.Constants.WhiteBalance.auto}
autoFocus={RNCamera.Constants.AutoFocus.on}
autoFocusPointOfInterest={ {x: 0.5, y: 0.5 }}
exposure={0.5}
focusDepth={1.0}
cameraViewDimensions={{
width: CAM_VIEW_WIDTH,
height: CAM_VIEW_HEIGHT,
}}
showViewFinder={true}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
androidRecordAudioPermissionOptions={{
title: 'Permission to use audio recording',
message: 'We need your permission to use your audio',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
onGoogleVisionBarcodesDetected={({ barcodes }) => {
console.log(barcodes);
}}
>
{/* <View
style={{
// position: 'absolute',
// top: 20,
// right: 20,
alignSelf: 'center',
justifyContent: 'center',
width: frameHeight,
height: frameWidth,
borderWidth: 2,
borderColor: 'white',
opacity: 0.5,
}}
/> */}
<View style={{ flexDirection: 'row', justifyContent: 'center', }}>
<TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
<Text style={{ fontSize: 14 }}> Click </Text>
</TouchableOpacity>
</View></RNCamera></View>
<View style={{ backgroundColor: 'red' }}>
<Text>Back camera: {RNCamera.Constants.Type.back}</Text>
<Text>autoFocusPointOfInterest</Text>
</View>
</View>
</View>
)
}
}
takePicture = async () => {
if (this.camera) {
const options = { quality: 0.5, base64: true, exif: true };
this.setState({loading: true})
const data = await this.camera.takePictureAsync(options);
console.log(data); // This data provide EXIF data
}
};
In Native iOS we get live metadata using CMSampleBuffer delegate. Is there any possibility to get Exif data before taking pictures.
Does Anyone knows why the panel is not showing on android when I click on the button?
I'm using https://www.npmjs.com/package/rn-sliding-up-panel btw. Please feel free to tell me, if you have any other recommended sliding panel library.
const CCTVTab = () => {
return (
<React.Fragment>
<View
style={{
flex: 1,
marginTop: 30,
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
}}>
<Button title="Show panel" onPress={() => _panel.show(300)} />
</View>
<SlidingUpPanel
style={{borderTopLeftRadius: 10}}
ref={c => (_panel = c)}>
<View
style={{
flex: 1,
backgroundColor: 'black',
alignItems: 'center',
borderTopRightRadius: 18,
borderTopLeftRadius: 18,
}}>
<Text>Header</Text>
<Text>Content</Text>
<Button title="Hide" onPress={() => _panel.hide()} />
</View>
</SlidingUpPanel>
</React.Fragment>
);
};
i am working on a app by react native.i have a problem.when my app has a debug mode work very well.but in without debug mode my flat list not execute completely.
for example :
when render my flat list date is invalid.
<FlatList
style={{ flex: 1 }}
extraData={this.state}
data={this.state.data}
renderItem={this.renderItem.bind(this)}
keyExtractor={item => item._id.toString()}
ListFooterComponent = { this.Render_Footer.bind(this) }
/>
and Render Item by :
renderItem({item}) {
console.log(item)
return <View
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontFamily: Font.main, fontSize: 12}}>{I18n.t('Type')}</Text>
<Text style={{fontSize: 12, fontFamily: Font.main}}>{I18n.t(item.type)}</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontFamily: Font.main, fontSize: 12}}>{I18n.t('OrderDate')}</Text>
<Text style={{
fontFamily: this.state.isrtl ? Font.main_persian_digit : Font.main, color: Color.Gray
, fontSize: 12
}}>{this.state.isrtl ? getshamsidate(item.effective_time) : getmiladdate(item.effective_time)}</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{
fontFamily: Font.main,
color: item.status === 'pardakht' ? Color.green : Color.primarycolor,
fontSize: 12
}}>{I18n.t('TotalAmount')}</Text>
<Text style={{
fontFamily: this.state.isrtl ? Font.main_persian_digit : Font.main,
color: item.status === 'pardakht' ? Color.green : Color.primarycolor
,
fontSize: 12
}}>{addCommas(item.amount)} {I18n.t('Toman')}</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontFamily: Font.main, fontSize: 12}}>{I18n.t('Status')}</Text>
{
item.status === 'SUCCESS' ?
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Icon
style={{fontSize: 10}}
name='checkmark'
/>
<Text style={{
fontFamily: this.state.isrtl ? Font.main_persian_digit : Font.main,
paddingLeft: 5,
paddingRight: 5
,
fontSize: 12
}}>{I18n.t(item.status)}</Text>
</View>
:
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Icon
style={{fontSize: 10, color: 'red'}}
name='close'
/>
<Text style={{
fontFamily: this.state.isrtl ? Font.main_persian_digit : Font.main,
color: Color.Red,
paddingLeft: 5,
paddingRight: 5
,
fontSize: 12
}}>{I18n.t(item.status)}</Text>
</View>
}
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontFamily: Font.main, fontSize: 12}}>{I18n.t('PreviousCredit')}</Text>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text style={{
fontFamily: this.state.isrtl ? Font.main_persian_digit : Font.main,
paddingLeft: 5,
paddingRight: 5
,
fontSize: 12
}}>{item.balance_before !== null ?
addCommas(item.balance_before.toString()) : 0
} {I18n.t('Toman')}
</Text>
</View>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontFamily: Font.main, fontSize: 12}}>{I18n.t('NextCredit')}</Text>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text style={{
fontFamily: this.state.isrtl ? Font.main_persian_digit : Font.main,
paddingLeft: 5,
paddingRight: 5
,
fontSize: 12
}}>{item.balance_after !== null ?
addCommas(item.balance_after.toString()) : 0
} {I18n.t('Toman')}
</Text>
</View>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontFamily: Font.main, fontSize: 12}}>{I18n.t('bankcorrelationid')}</Text>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
{item.debit !== undefined ?
<Text style={{
fontFamily: this.state.isrtl ? Font.main_persian_digit : Font.main,
color: Color.linkcolor,
paddingLeft: 5,
paddingRight: 5
,
fontSize: 12
}}>{item.debit.bank_corelation_id}
</Text> : null}
</View>
</View>
{
Object.keys(item.cart).length !== 0 ?
<TouchableOpacity style={{flexDirection: 'row', justifyContent: 'space-between', paddingTop: 5}}
onPress={() => {
this.props.navigation.navigate('TransAction', {product: item.cart})
}
}
>
<Text style={{
fontFamily: Font.main,
color: Color.circleblu,
fontSize: 12
}}>{I18n.t('Orderdetails')}</Text>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Icon
style={{fontSize: 14, color: Color.circleblu}}
name={this.state.isrtl ? 'arrow-back' : 'arrow-forward'}
/>
</View>
</TouchableOpacity>
: null
}
</View>
}
The above code ,render my item in flatlist .in debug mode working very good,but in release mode date in undefinedNaN:Nan showed
react native has nothing to do with your data in different modes.
from your code it seems that you have problem with datetime rendering. react-native has problem with datetime rendering sometimes.
make sure that date string in your new Date("your_date") is in ISO format with 'T' in string like "2018-05-02T12:00:00)". that way you date function should work.
i findeed solutions,this problem for javascript in android .i am solved problem using moment.js