image-rotate-flipped.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  useColorScheme,
  Image,
  TouchableOpacity,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import ImageResizer from '@bam.tech/react-native-image-resizer';
import {launchImageLibrary} from 'react-native-image-picker';

function App() {
  const isDarkMode = useColorScheme() === 'dark';
  const [imageB, setImageB] = React.useState(null);
  const [imagesResult, setImagesResult] = React.useState([]);

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const onClick = async () => {
    try {
      const result = await launchImageLibrary();
      setImageB(result.assets[0].uri);
      const data = [];
      for (let i = 0; i < 4; i++) {
        const path = await ImageResizer.createResizedImage(
          result.assets[0].uri,
          1800,
          1200,
          'JPEG',
          100,
          (rotation = 90 * i),
        );
        data.push(path.uri);
      }
      setImagesResult(data);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <TouchableOpacity onPress={onClick}>
          <Text>Pick up image</Text>
        </TouchableOpacity>
        <Text>Before: </Text>
        {!!imageB && (
          <Image
            source={{uri: imageB}}
            style={{
              // flex:1,
              width: '100%',
              height: 200,
              backgroundColor: 'red',
            }}
            resizeMode="stretch"
            resizeMethod="auto"
          />
        )}
        <Text>After: </Text>
        {imagesResult.map(item => (
          <Image
            source={{uri: item}}
            key={item}
            style={{
              // flex:1,
              width: '100%',
              height: 200,
              backgroundColor: 'red',
              marginTop: 10,
            }}
            resizeMode="stretch"
            resizeMethod="auto"
          />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}
export default App;