src/component/modalRepostView/view.js

@@ -15,11 +15,12 @@ export default class ModalRepostView extends React.PureComponent {
   depositAmountInput;
 
   state = {
-    repostName: null,
     channelName: null,
     creditsInputFocused: false,
     depositAmount: '0.1',
+    repostName: null,
     repostStarted: false,
+    showAdvanced: false,
   };
 
   componentDidMount() {
@@ -92,6 +93,7 @@ export default class ModalRepostView extends React.PureComponent {
     const { balance, channels, reposting, title, onCancelPress, onOverlayPress } = this.props;
     const canRepost = !!this.state.channelName && !!this.state.repostName;
     const channelsLoaded = channels && channels.length > 0;
+    const processing = this.state.repostStarted || reposting || !channelsLoaded;
 
     return (
       <TouchableOpacity style={modalStyle.overlay} activeOpacity={1} onPress={onOverlayPress}>
@@ -118,6 +120,8 @@ export default class ModalRepostView extends React.PureComponent {
               onChannelChange={this.handleChannelChange}
             />
 
+            {this.state.showAdvanced && (
+              <View>
                 <Text style={modalRepostStyle.label}>{__('Name')}</Text>
                 <View style={modalRepostStyle.nameRow}>
                   <TextInput
@@ -159,12 +163,12 @@ export default class ModalRepostView extends React.PureComponent {
                       )}
                     </View>
                   </View>
-              {(this.state.repostStarted || reposting || !channelsLoaded) && (
-                <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
-              )}
                 </View>
+              </View>
+            )}
 
             <View style={modalRepostStyle.buttonRow}>
+              {!processing && (
                 <Link
                   style={modalRepostStyle.cancelLink}
                   text={__('Cancel')}
@@ -172,6 +176,18 @@ export default class ModalRepostView extends React.PureComponent {
                     if (onCancelPress) onCancelPress();
                   }}
                 />
+              )}
+
+              {processing && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
+
+              <View style={modalRepostStyle.rightButtonRow}>
+                <Link
+                  style={modalRepostStyle.advancedLink}
+                  text={this.state.showAdvanced ? __('Hide advanced') : __('Show advanced')}
+                  onPress={() => {
+                    this.setState({ showAdvanced: !this.state.showAdvanced });
+                  }}
+                />
                 <Button
                   text={__('Repost')}
                   style={modalRepostStyle.button}
@@ -180,6 +196,7 @@ export default class ModalRepostView extends React.PureComponent {
                 />
               </View>
             </View>
+          </View>
         </TouchableOpacity>
       </TouchableOpacity>
     );

src/styles/modalRepost.js

@@ -44,6 +44,10 @@ const modalRepostStyle = StyleSheet.create({
   cancelLink: {
     color: Colors.Grey,
   },
+  advancedLink: {
+    color: Colors.Grey,
+    marginRight: 16,
+  },
   balance: {
     alignItems: 'center',
     flexDirection: 'row',
@@ -76,6 +80,10 @@ const modalRepostStyle = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  rightButtonRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   input: {
     fontFamily: 'Inter-Regular',
     fontSize: 14,