gre / react-native-view-shot

Snapshot a React Native view and save it to an image

Home Page:https://github.com/gre/react-native-view-shot-example

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

not working on android React-Native 0.7x

PhamMinhKha opened this issue · comments

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>
  );
}

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>
}