[5.3] Add On-Ramp Aggregator What's new modal #4484
Conversation
| }, | ||
| slideItemContainerContent: { | ||
| paddingBottom: 16, | ||
| flexGrow: 1, | ||
| }, | ||
| slide: { | ||
| flex: 1, |
There was a problem hiding this comment.
This allows the slide to be full height
| @@ -119,11 +125,11 @@ const createStyles = (colors) => | |||
| }); | |||
|
|
|||
| const WhatsNewModal = (props) => { | |||
| const scrollViewRef = useRef(); | |||
There was a problem hiding this comment.
This ref is later used to scroll when indicators are pressed.
| const [featuresToShow, setFeaturesToShow] = useState(null); | ||
| const [show, setShow] = useState(false); | ||
| const routes = useNavigationState((state) => state.routes); | ||
| const slideIds = [0, 1]; | ||
| const [currentSlide, setCurrentSlide] = useState(slideIds[0]); | ||
| const [currentSlide, setCurrentSlide] = useState(0); |
There was a problem hiding this comment.
slides where fixed to be 2, this is now agnostic of the length of the slides coming from whatsNew
| <ScrollView | ||
| key={key} | ||
| style={styles.slideItemContainer} | ||
| contentContainerStyle={styles.slideItemContainerContent} | ||
| > | ||
| <TouchableWithoutFeedback> | ||
| <View> | ||
| <View style={styles.slide}> |
There was a problem hiding this comment.
This allows slides to be full height
| @@ -280,9 +290,11 @@ const WhatsNewModal = (props) => { | |||
| </TouchableOpacity> | |||
| </View> | |||
| </View> | |||
| {featuresToShow && ( | |||
| {whatsNew.slides.length > 0 && ( | |||
There was a problem hiding this comment.
Conditionally rendering based on featuresToShow was causing a content flash when CTAs were pressed.
| <View style={styles.slideContent}> | ||
| <ScrollView | ||
| ref={scrollViewRef} | ||
| scrollEnabled={whatsNew.slides.length > 1} |
There was a problem hiding this comment.
This ref is used to scroll then indicators are pressed. Scroll is disabled if there's only one page.
| {whatsNew.slides.length > 1 && ( | ||
| <View style={styles.progessContainer}> | ||
| {whatsNew.slides.map((_, index) => ( | ||
| <TouchableWithoutFeedback | ||
| key={index} | ||
| onPress={() => { | ||
| scrollViewRef?.current?.scrollTo({ | ||
| y: 0, | ||
| x: index * slideItemWidth, | ||
| }); | ||
| setCurrentSlide(index); | ||
| }} | ||
| hitSlop={{ top: 10, left: 10, bottom: 10, right: 10 }} | ||
| > | ||
| <View | ||
| style={[ | ||
| styles.slideCircle, | ||
| currentSlide === index && styles.slideSolidCircle, | ||
| ]} | ||
| /> | ||
| </TouchableWithoutFeedback> | ||
| ))} | ||
| </View> | ||
| )} |
There was a problem hiding this comment.
Indicators are shown only when there are more than 1 pages and they are pressable.
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
|
|
mobularay
changed the title
| @@ -5,7 +5,7 @@ import { WhatsNew } from './types'; | |||
|
|
|||
| export const whatsNew: WhatsNew = { | |||
| // All users that have <1.0.7 and are updating to >=1.0.7 should see | |||
There was a problem hiding this comment.
Let's update this to either use the property names or what the actual versions are. In this case, both would be 5.3.0
mobularay
added
the
release-5.3.0
This PR adds the content of the On Ramp Aggregator What's new modal
This PR also improves: