Skip to content

Implement UI screen based on design mockup#313

Open
Pawlo7777777 wants to merge 1 commit into
Zeff01:mainfrom
Pawlo7777777:paolo-villanueva/1-2-years-mobile
Open

Implement UI screen based on design mockup#313
Pawlo7777777 wants to merge 1 commit into
Zeff01:mainfrom
Pawlo7777777:paolo-villanueva/1-2-years-mobile

Conversation

@Pawlo7777777

Copy link
Copy Markdown
feed-screen login-screen

Description:
Implemented the login and feed screens to match the provided design mockups.

  1. Built both screens in React Native using SafeAreaView, Pressable/TouchableOpacity, and StyleSheet for layout and styling.
  2. Matched the Instagram wordmark using the Grand Hotel Google Font (via @expo-google-fonts/grand-hotel) loaded through expo-font/expo-splash-screen, applied consistently across both screens.
  3. Login screen: email/password inputs, animated Remember Me checkbox, Forgot password link, primary Login button, and a Login with Facebook button, all with proper press/opacity states.
  4. Feed screen: horizontal stories list with live badge, post cards with verified badge and country flag, like/comment/share/send actions, and a bottom tab bar.
  5. Replaced emoji country flags with flagcdn.com images for cross-platform (Android) rendering consistency.
  6. Used StyleSheet.hairlineWidth for the tab bar divider to get a crisp, consistent stroke across device pixel densities.
  7. Icons via @expo/vector-icons (Feather).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant