not working on android React-Native 0.7x
PhamMinhKha opened this issue · comments
phamminhkha commented
It's not working and not showing any errors on Android, but it works fine on iOS.
Version & Platform
├─┬ @react-native-masked-view/masked-view@0.2.9
│ └── react-native@0.72.6 deduped
├─┬ @react-native-picker/picker@2.5.1
│ └── react-native@0.72.6 deduped
├─┬ @react-navigation/bottom-tabs@6.5.11
│ ├─┬ @react-navigation/elements@1.3.21
│ │ └── react-native@0.72.6 deduped
│ └── react-native@0.72.6 deduped
├─┬ @react-navigation/native-stack@6.9.17
│ └── react-native@0.72.6 deduped
├─┬ @react-navigation/native@6.1.9
│ └── react-native@0.72.6 deduped
├─┬ @react-navigation/stack@6.3.20
│ └── react-native@0.72.6 deduped
├─┬ @realm/react@0.6.1
│ └── react-native@0.72.6 deduped
├─┬ @testing-library/jest-native@5.4.3
│ └── react-native@0.72.6 deduped
├─┬ @testing-library/react-native@12.3.2
│ └── react-native@0.72.6 deduped
├─┬ @types/react-native@0.72.6
│ └─┬ @react-native/virtualized-lists@0.72.8
│ └── react-native@0.72.6 deduped
├─┬ react-native-ble-plx@3.1.2-rc.0
│ └── react-native@0.72.6 deduped
├─┬ react-native-flipper@0.202.0
│ └── react-native@0.72.6 deduped
├─┬ react-native-fs@2.20.0
│ └── react-native@0.72.6 deduped
├─┬ react-native-gesture-handler@2.13.4
│ └── react-native@0.72.6 deduped
├─┬ react-native-mmkv@2.10.2
│ └── react-native@0.72.6 deduped
├─┬ react-native-reanimated@3.5.4
│ └── react-native@0.72.6 deduped
├─┬ react-native-safe-area-context@4.7.4
│ └── react-native@0.72.6 deduped
├─┬ react-native-screens@3.27.0
│ └── react-native@0.72.6 deduped
├─┬ react-native-view-shot@3.8.0
│ └── react-native@0.72.6 deduped
├── react-native@0.72.6
├─┬ react-redux@8.1.3
│ └── react-native@0.72.6 deduped
├─┬ realm@12.3.0
│ └── react-native@0.72.6 deduped
├─┬ redux-flipper@2.0.2
│ └── react-native@0.72.6 deduped
└─┬ tp-react-native-bluetooth-printer@1.4.0
└── react-native@0.72.6 deduped
Platform: Android
We will notify an error to fix.
Actual behavior: Nothing appears.
Steps to reproduce the behavior
import {
View,
Text,
TextInput,
TouchableOpacity,
Image,
ScrollView,
} from 'react-native';
import React, { useState, useRef } from 'react';
import { useTheme, useSetting } from '@/hooks';
import { PrintLabel } from '@/utilities/PrinterFunction';
import ViewShot, { ViewShotProperties } from 'react-native-view-shot';
export default function InTem() {
const viewShot = useRef<any | ViewShotProperties>();
const { tencuahang, sdt } = useSetting();
const { Layout, Colors, Gutters, Common, Fonts } = useTheme();
const Logo = require('../../theme/assets/images/full_logo_ngang.png');
// const [setting, SetSetting] = useState<Config>({
// tencuahang,
// diachi,
// sdt,
// mayin,
// loichao,
// loitambiet,
// tennhanvien,
// });
const [info, setInfo] = useState({
nguoinhan: '',
sodienthoai: '',
diachi: '',
});
async function inTemRa() {
console.log('InTem');
viewShot.current.capture().then((base64: any) => {
console.log('do something with ', base64);
PrintLabel(base64);
});
}
return (
<View style={[Layout.fill, Gutters.tinyPadding]}>
<Text>Tên người nhận</Text>
<TextInput
style={[Common.textInput]}
onChangeText={e => setInfo({ ...info, nguoinhan: e })}
/>
<Text>Số điện thoại</Text>
<TextInput
style={[Common.textInput]}
onChangeText={e => setInfo({ ...info, sodienthoai: e })}
/>
<Text>Địa chỉ</Text>
<TextInput
style={[Common.textInput]}
onChangeText={e => setInfo({ ...info, diachi: e })}
/>
<TouchableOpacity
style={[
Common.button.rounded,
Gutters.regularBMargin,
{ backgroundColor: Colors.success },
]}
onPress={inTemRa}
>
<Text>In tem</Text>
</TouchableOpacity>
<ViewShot
ref={viewShot}
style={{ flex: 1 }}
options={{ result: 'base64' }}
>
<ScrollView style={{ flex: 1 }}>
<View
style={[
Layout.alignItemsCenter,
Gutters.tinyPadding,
Layout.scrollSpaceBetween,
{
backgroundColor: Colors.white,
width: 569,
height: 378,
marginTop: 10,
marginBottom: 10,
transform: [
{
rotate: '90deg',
},
],
top: 80,
},
]}
>
<Image source={Logo} />
<View style={[Layout.alignItemsCenter]}>
<Text style={[Fonts.textRegular]}>
Người Nhận: {info.nguoinhan}
</Text>
<Text style={[Fonts.textRegular]}>
Điện thoại: {info.sodienthoai}
</Text>
<Text style={[Fonts.textRegular]}>{info.diachi}</Text>
</View>
<Text style={[Fonts.textRegular]}>
Người gửi: {tencuahang} - ĐT: {sdt}
</Text>
</View>
</ScrollView>
</ViewShot>
</View>
);
}
kuldipopenxcell commented
I got the same issue, it does not work on android and not showing any error logs
const MapPage = () => {
const captureMap = async () => {
try {
// Capture map as image
const uri = await mapRef.current.capture();
console.log('uri', uri);
} catch (error) {
console.error('Error:', error);
Alert.alert('Error', 'Failed to save PDF.');
}
};
return (
<View style={styles.container}>
<ViewShot ref={mapRef} style={{flex: 1}}>
<MapView
ref={mapRef}
style={{flex: 1}}
scrollEnabled={false}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 55.8622166,
longitude: 12.388021,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onTouchStart={handleTouchStart}
onPanDrag={handlePanDrag}
onTouchEnd={handleTouchEnd}>
{lines.map((line, index) => (
<Polyline
key={index}
coordinates={line}
strokeColor="#FF0000"
strokeWidth={3}
/>
))}
</MapView>
</ViewShot>
<Button label="Capture screenshot" onPress={captureMap} />
</View>
}