Qr code generation #7114

[X1Vi]

I have added a qrcode that users can quickly scan to move onto a person's profile . I hope this PR closes this #7114 issue.

brave_QmqZZJ4AY9.mp4

[oracularhades]

Nice pr, well done. You should move the "Generate QR code" button into the "•••" dropdown menu. It's easy enough to do. You should also move

const QRCodeModal: React.FC<QRCodeModalProps> = ({
  profile_,
  visible,
  setVisible,
}) => {
  return (
    <Modal
      visible={visible}
      animationType="fade"
      transparent={true}
      onRequestClose={() => setVisible(false)} // Close modal when back button is pressed (for Android)
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
        }}>
        <View
          style={{
            justifyContent: 'center', // Center QR code horizontally
            alignItems: 'center', // Center QR code vertically
            backgroundColor: 'white', // Set the background color
            padding: 20, // Add padding to give space around QR code
            borderRadius: 10, // Optional: round the corners of the modal content
          }}>
          <QRCodeStyled
            data={`https://bsky.app/${makeProfileLink(profile_)}`}
            style={{width: 200, height: 200}} // Larger QR code
            padding={20}
            pieceSize={10} // Larger pieces for clearer QR code
          />
        </View>

        {/* Pressable to close the modal */}
        <Pressable
          accessibilityRole="button"
          onPress={() => setVisible(false)}
          style={{
            marginTop: 20,
            backgroundColor: 'transparent',
            padding: 10,
            borderRadius: 5,
            borderColor: 'white',
            borderWidth: 1,
          }}>
          <ButtonText>
            <Trans style={{color: 'white', fontSize: 16}}>Close</Trans>
          </ButtonText>
        </Pressable>
      </View>
    </Modal>
  )
}

into it's own file.

[oracularhades]

Here's an example for adding items to the dropdown menu #4373

[X1Vi]

Nice pr, well done. You should move the "Generate QR code" button into the "•••" dropdown menu. It's easy enough to do. You should also move

const QRCodeModal: React.FC<QRCodeModalProps> = ({
  profile_,
  visible,
  setVisible,
}) => {
  return (
    <Modal
      visible={visible}
      animationType="fade"
      transparent={true}
      onRequestClose={() => setVisible(false)} // Close modal when back button is pressed (for Android)
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
        }}>
        <View
          style={{
            justifyContent: 'center', // Center QR code horizontally
            alignItems: 'center', // Center QR code vertically
            backgroundColor: 'white', // Set the background color
            padding: 20, // Add padding to give space around QR code
            borderRadius: 10, // Optional: round the corners of the modal content
          }}>
          <QRCodeStyled
            data={`https://bsky.app/${makeProfileLink(profile_)}`}
            style={{width: 200, height: 200}} // Larger QR code
            padding={20}
            pieceSize={10} // Larger pieces for clearer QR code
          />
        </View>

        {/* Pressable to close the modal */}
        <Pressable
          accessibilityRole="button"
          onPress={() => setVisible(false)}
          style={{
            marginTop: 20,
            backgroundColor: 'transparent',
            padding: 10,
            borderRadius: 5,
            borderColor: 'white',
            borderWidth: 1,
          }}>
          <ButtonText>
            <Trans style={{color: 'white', fontSize: 16}}>Close</Trans>
          </ButtonText>
        </Pressable>
      </View>
    </Modal>
  )
}

into it's own file.

Done

brave_D30nLS3YfW.mp4

[X1Vi]

@oracularhades Is there something else you need me to do or is this enough to get merged ?

[oracularhades]

I'm not Bluesky staff I can't merge things :)